Vue JS: How to update the value that is inside data return

Question

I am using the vue-codemirror package to display css code on a website. The problem is that I don't understand how to update the state I get with vuex

  <div>
    <codemirror v-model="code" />
    <button @click="change">click</button>
    {{ $store.state.background }}
  </div>

  methods: {
    change() {
      Vue.set(this.$store.state, "background", "#242424");
    },
  },

  data() {
    return {
      code: dedent`
          /* Some example CSS */
          body {
            margin: ${this.$store.state.background};
            padding: 3em 6em;
          }
        `,
    };
  },

Vuex

export default new Vuex.Store({
  state: {
    background: "#000",
  },
});

I thought that the problem was reactivity and decided to use Vue.set when clicking on the click button, the value of {{ $store.state.background }} changes, but the code that is inside the data return does not change

You can also see this example in codesandbox