Component using vuex does not update correctly when used more than once on site

I am writing a component for a slider. It is used two times on the site and gets the data by passing the name of the vuex getters and mutations through props. The odd thing is that it works when I use the component one time. If I use two of them, the second does not update correctly when clicking the button. The text updates, but the slider jumps to the old maxValue.

Does anyone know what could be wrong here?

This is a minimal example that demonstrates the problem:
store:

import { createStore } from "vuex";

const store = createStore({
  state: {
    value1: 3,
    value2: 4,
    max1: 10,
    max2: 10
  },
  getters: {
    get_max1: (state) => state.max1,
    get_max2: (state) => state.max2,
  },
  mutations: {
    SET_MAX1(state, m) {
      state.max1 = m
    },
    SET_MAX2(state, m) {
      state.max2 = m
    },
    SET_VALUE1(state, val) {
      state.value1 = val
    },
    SET_VALUE2(state, val) {
      state.value2 = val
    }
  }
});

export default store;

app:

<template>
  <div id="app">
    <hello-world store_method="SET_VALUE1" filter_name="value1" max_getter="get_max1"></hello-world>
    <hello-world store_method="SET_VALUE2" filter_name="value2" max_getter="get_max2"></hello-world>
    <button @click=clicked>Inc</button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
  components: { HelloWorld },
  name: "App",
  methods: {
    clicked () {
      this.$store.commit('SET_MAX1', Math.floor(Math.random() * 50) + 10 )
      this.$store.commit('SET_MAX2', Math.floor(Math.random() * 50) + 10 )
    }
  }
};
</script>

component:

<template>
  <div>
    <label :for="max_getter" class="form-label"><slot>Range</slot>: {{ current }}</label>
    <input
      type="range"
      class="form-range"
      :max="maxValue"
      v-model.number="current"
      :id="max_getter" />
  </div>
</template>

<script>
export default {
  name: 'SliderFilter',
  props: {
    store_method: {
      type: String,
      required: true
    },
    filter_name: {
      type: String,
      required: true
    },
    max_getter: {
      required: true,
      type: String
    }
  },
  computed: {
    maxValue () {
      return this.$store.getters[this.max_getter]
    },
    current: {
      get () {
        return this.$store.state[this.filter_name]
      },
      set (v) {
        this.$store.commit(this.store_method, v)
      }
    }
  },
  watch: {
    maxValue (newValue) {
      this.current = newValue
    }
  }
}
</script>

Sounds like a reference instance and async problem. Keep in mind that Vuex was made to access data from global scope of your application. Why not access Vuex directly in your component? You can pass as prop something like the name of the getter, and, inside the slider, do what you want by this reference name (the prop that you pass).
Try this instead passing the method to manipulate the store.

Update:

I realize right now one thing that can be the problem. As my suggestion above, store is in the global scope, if you pass it to as prop, this can be conflicting (this.yourStoreAction is already in the slider component, so passing it, you have two of it, sounds wrong)

It seems like you’re using one Vuex state, but settings state properties, getters, mutations for 2 different Sliders.

Don’t do that.

Use Vuex modules to create a reusable module for your slider. This way each slider has it’s own state (context) and you can create as many sliders as you want without them conflicting.

Thanks for the response.
I don’t understand why using one Vuex state should cause problems. However I tried your suggestions but it did not work. The undesired behaviour stays the same (second slider updates to the old max value but the label updates correctly and the values in the store are set correctly).

This is the modified code for the store:

import { createStore } from "vuex";

const createSliderStore = () => ({
  namespaced: true,
  state: () => ({
    value: 3,
    max: 10
  }),
  getters: {
    get_max: (state) => state.max,
  },
  mutations: {
    SET_MAX(state, m) {
      state.max = m
    },
    SET_VALUE(state, val) {
      state.value = val
    }
  }
})


const store = createStore({
  modules: {
    a: createSliderStore(),
    b: createSliderStore()
  }
})

export default store;

and the script part of the component:

export default {
  name: 'SliderFilter',
  props: {
    store_module: {
      type: String,
      required: true
    }
  },
  computed: {
    maxValue () {
      return this.$store.getters[this.store_module + '/get_max']
    },
    current: {
      get () {
        return this.$store.state[this.store_module].value
      },
      set (v) {
        this.$store.commit(this.store_module + '/SET_VALUE', v)
      }
    }
  },
  watch: {
    maxValue (newValue) {
      this.current = newValue
    }
  }
}

Thank you for the response. I don’t quite understand what you mean. I am passing the name of the getter, mutations,… as props already and I don’t understand why they would be conflicting. The two different slider instances should have two separate set of properties, don’t they?

As Vuex doc says:

If more than one component needs to make use of this, we have to either duplicate the function, or extract it into a shared helper and import it in multiple places - both are less than ideal.
Vuex allows us to define “getters” in the store. You can think of them as computed properties for stores. Like computed properties, a getter’s result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed.
Getters | Vuex

Yes, I know what getters are. I am using them for max1 and max2 already (see the code of the first post) . Even if use them for value1 and value2 as well and pass the name of the getters as props, the bug still persists. I don’t think it is related to getters.

I figured it out. A post watcher is required so that value of the slider is set after max.