VueJS-Vuex状态更新时组件未更新

Question

I have a vuex store with an item called "columnChoice" inside of the state. I have a component that's updating it in a text box, and a computed property that updates it and verifies that it's a positive integer. However, the component's computed properties aren't updating (according to the dev tools), even though the vuex store definitely is (also according to the dev tools).

Here's the code, I've removed the other methods/values that aren't relevant, but if it seems like something's missing let me know.

I've tried changing the computed setup from the "...mapState([])" one to this one, and I also tried the v-model setup with seperate set and get functions.

the Vuex store index.js :

import Vuex from 'vuex'

export default new Vuex.Store({
  state: {
    columnChoice: 1,
    processingStatus: 0,
    columnError: 0
  },
  mutations : {
    resetVars(state) {
      state.processingStatus = 0
      state.columnError = 0
      state.columnChoice = 1
    },

    setProcessingStatus(state, v) {
      state.processingStatus = v
    },

    columnError(state) {
      state.columnError = 1
    },
    columnGood(state) {
      state.columnError = 0
    },
    columnSet(state, v) {
      state.columnChoice = v
    }
  }
})

The component:

<template>
  <div class="row p-2">
    <div class="col-2">Column in reference file</div>
    <div class="col-10"><input type=text size=3 :value="columnChoice" @change="verifyColumn" id="columnChoice"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ColumnChoice',
  computed: {
    ...mapState([
      'columnChoice'
    ]),
  },
  methods: {
    verifyColumn(e) {
      if (isNaN(e.target.value) || e.target.value < 1) {
        this.$store.commit('columnError')
        this.$store.commit('columnSet', e.target.value)
      } else {
        this.$store.commit('columnGood')
        this.$store.commit('columnSet', e.target.value)
      }
    },
  }
}
</script>

Additionally, after changing the value to 5 in the text field and selecting this component in the dev tools (assigning it to $vm0), I get the following, showing that the state is indeed updated and accessible through the component, but that the computed property just isn't updating:

$vm0.$store.state.columnChoice
> "5"
$vm0._computedWatchers.columnChoice.value
> "1"

Answer 1

Alright, I figured it out. Turns out in my index.html file I had been fetching a vue instance from a CDN in addition to using the one imported from NPM