V-autocomplete not updating on user interaction

Question

I am having 3 multi-select elements on a page and one button. On click on the button, I want whatever the value selected on the third i.e last multi-select element, shall get selected on all top two multi-select elements. On clicking on button, i do see the values are getting updated in vuex.state.vModelValues based on the given key, but the updated values are not reflecting on the first 2 multi-select.

Note: I need to get/set the value of the first 2 multi-select from a JSON object based on the key/value pair. I can use an individual array with v-model with first 2 multi-select element, but i don't want to go with that approach as i may have 100 multi-selects element and can't define 100 array in data section. So want to define a JSON which will hold the key/value for each multi-selects and should be reactive. If the value of one entry change, the key that mapped to multi-select shall get updated immediately.

I am not sure what i am doing wrong here. The value are updated on store but the updated value are not get selected on UI. Please help.

Below is my code:

1. STORE

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state() {
    return {
      vModelValues: {},
    };
  },

  getters: {
    getVModelPlaceholder(state) {
      return state.vModelValues;
    },

    getVModelValue(state, key) {
      return state.vModelValues[key];
    },
  },

  mutations: {
    setVModelValue(state, payload) {
      state.vModelValues[payload.key] = payload.value;
    },
  },
  actions: {
    setVModelValue(context, payload) {
      context.commit("setVModelValue", payload);
    },
  },
  modules: {},
});

APP.VUE

<template>
  <v-app>
    <v-main>
      <HelloWorld />
    </v-main>
  </v-app>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",

  components: {
    HelloWorld,
  },

  data: () => ({}),

  mounted: function () {
    this.$store.dispatch("setVModelValue", {
      key: "listbox_checkbox_ID1",
      value: ["Three"],
    });
    this.$store.dispatch("setVModelValue", {
      key: "listbox_checkbox_ID2",
      value: ["Two"],
    });
  },
};
</script>

HelloWorld.vue

<template>
  <v-container>
    <div id="container_dummy_PID1" style="height: auto; width: 100%">
      <v-autocomplete
        id="listbox_checkbox_1"
        :items="ranges"
        v-model="$store.state.vModelValues['listbox_checkbox_ID1']"
        hide-details
        multiple
        dense
        return-object
        cache-items
      >
      </v-autocomplete>

      <v-autocomplete
        id="listbox_checkbox_2"
        :items="ranges"
        v-model="$store.state.vModelValues['listbox_checkbox_ID2']"
        hide-details
        multiple
        dense
        return-object
        cache-items
      >
      </v-autocomplete>

      <v-autocomplete
        v-model="selectedValues"
        :items="ranges"
        hide-details
        multiple
        dense
        required
        return-object
      >
      </v-autocomplete>
      <v-btn color="primary" @click="applyToAll()">Apply to All</v-btn>
    </div>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      selectedValues: "",
      ranges: ["One", "Two", "Three", "Four", "Five"],
    };
  },

  methods: {
    applyToAll() {
      this.$store.dispatch("setVModelValue", {
        key: "listbox_checkbox_ID1",
        value: this.selectedValues,
      });
      this.$store.dispatch("setVModelValue", {
        key: "listbox_checkbox_ID2",
        value: this.selectedValues,
      });
    },
  },
};
</script>