computed property set not called in Vue

Instead of a computed getter/setter, use a local data prop, initialized to the target localStorage item; and a deep watcher (which detects changes on any subproperty) that sets localStorage upon change. This allows you to still use v-model with the local data prop, while observing changes to the object's subproperties.

Steps:

1. Declare a local data prop (named options) that is initialized to the current value of localStorage:

export default {  data() {    return {      options: {}    }  },  mounted() {    const myData = localStorage.getItem('my-data')    this.options = myData ? JSON.parse(myData) : {}  },}

2. Declare a watch on the data prop (options), setting deep=true and handler to a function that sets localStorage with the new value:

export default {  watch: {    options: {      deep: true,      handler(options) {        localStorage.setItem('my-data', JSON.stringify(options))      }    }  },}

demo

Edit: After reading in the comments that you rely on the localstorage, I can only suggest you to take the Vuex approach and use a persistence library to handle the localstorage. (https://www.npmjs.com/package/vuex-persist)This way, your localstorage will always be linked to your app and you don't have to mess with getItem/setItem everytime.

Looking at your approach, I assume you have your reasons to use a computed property over a data property.

The problem happens because your computed property returns an object defined nowhere but in the get handler.Whatever you try, you won't be able to manipulate that object in the set handler.

The get and set must be linked to a common reference. A data property, as many suggested, or a source of truth in your app (a Vuex instance is a very good example).

this way, your v-model will work flawlessly with the set handler of your computed property.

Here's a working fiddle demonstrating the explanation:

With Vuex

const store = new Vuex.Store({  state: {    // your options object is predefined in the store so Vue knows about its structure already    options: {      isChecked: false    }  },  mutations: {    // the mutation handler assigning the new value    setIsCheck(state, payload) {      state.options.isChecked = payload;    }  }});new Vue({  store: store,  el: "#app",  computed: {    options: {      get() {        // Here we return the options object as depicted in your snippet        return this.$store.state.options;      },      set(checked) {        // Here we use the checked property returned by the input and we commit a Vuex mutation which will mutate the state        this.$store.commit("setIsCheck", checked);      }    }  }})

body {  background: #20262E;  padding: 20px;  font-family: Helvetica;}#app {  background: #fff;  border-radius: 4px;  padding: 20px;  transition: all 0.2s;}h2 {  font-weight: bold;  margin-bottom: 15px;}

<div id="app">  <h2>isChecked: {{ options.isChecked }}</h2>  <input type="checkbox" v-model="options.isChecked" /></div><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><script src="https://unpkg.com/vuex@2.0.0"></script>