<style>

#app {

  font-family: Roboto, Helvetica, Arial, sans-serif;

}

</style>

import {

    MDBSelect,

    MDBAutocomplete

} from "mdb-vue-ui-kit";

import {

    ref, watch, nextTick, onMounted

} from "vue";

​

export default {

    components: {

        MDBSelect,

        MDBAutocomplete,

    },

    setup() {

        // added missing v-model ref

        const autocompleteBasic = ref("")

        const PartiesList = ref();

        const getItems = ref([]);

        const filterOptions = (value) => {

            let starttime = Date.now();

            let flag = "";

            let filteredOptions = PartiesList.value.filter((item) => {

                if (item) {

                    return item.toLowerCase().startsWith(value.toLowerCase());

                }

            });

            let returnOptions = [];

            if (filteredOptions.length > 0) {

                returnOptions = filteredOptions;

            }

            return returnOptions;

        };

        const selectAuto = (value) => {

          // added console log with picked value

//           console.log("Picked value: " + value)

          nextTick(()=>{

            checkIfValid()

            console.log("next tick value ", autocompleteBasic.value)

          })

//              console.log('value before timeout' +autocompleteBasic.value);

//           setTimeout(function(){

//             console.log('value after timeout' + autocompleteBasic.value);

//           }, 500);

        }

        const closeAuto = () => {

//           console.log("close Auto");

        }

        const checkIfValid = () =>{

          if (PartiesList.value.findIndex(item=>item.toLowerCase()===autocompleteBasic.value.toLowerCase()) === -1) {

            autocompleteBasic.value = ""

          }

        }

​

        onMounted(()=>{

          let array = []

          for(var i = 0; i < 10000; i++){

            array.push("Party " + (i+1));

          }

          PartiesList.value = array

        })

        // added new watcher

        watch(()=> autocompleteBasic.value, (current, previous) => {

//        checkIfValid()

//           console.log("WATCH - old value: " + previous)

//           console.log("WATCH - new value: " + current)

        })

        const displayValueDisplay = (value) => value.toUpperCase();

        return {

            PartiesList,

            getItems,

            filterOptions,

            displayValueDisplay,

          selectAuto,

          autocompleteBasic,

          closeAuto,

          checkIfValid

        };

    },

};