Modification: Upon reviewing the comments indicating your reliance on localstorage, I recommend adopting the Vuex methodology and utilizing a persistence library for managing localstorage. (https://www.npmjs.com/package/vuex-persist) By doing so, your localstorage will remain integrated with your app without the need to constantly deal with getItem/setItem operations.

From the way you've approached it, it seems you have deliberate reasons for opting for a computed property rather than a data property.

The issue arises because your computed property returns an object that is only defined within the get handler. No matter what you attempt, manipulating that object within the set handler proves impossible.

The get and set should be associated with a shared reference. This could be a data property as suggested by many, or a central source of truth in your application (like a Vuex instance).

This setup ensures that your v-model functions seamlessly alongside the set handler of your computed property.

Here's a functional example illustrating this concept:

Using Vuex

const store = new Vuex.Store({
  state: {
    // Predefined options object in the store for Vue to recognize its structure
    options: {
      isChecked: false
    }
  },
  mutations: {
    setIsCheck(state, payload) {
      state.options.isChecked = payload;
    }
  }
});

new Vue({
  store: store,
  el: "#app",
  computed: {
    options: {
      get() {
        // Returning the options object as depicted in your code snippet
        return this.$store.state.options;
      },
      set(checked) {
        // Using the checked property from the input to commit a Vuex mutation that updates 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6d0d3c3dee69488968896">[email protected]</a>"></script>

Using a data property

new Vue({
  el: "#app",
  data: {
    options: {
      isChecked: false
    }
  },
  computed: {
    computedOptions: {
      get() {
        return this.options;
      },
      set(checked) {
        this.options.isChecked = 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: {{ computedOptions.isChecked }}</h2>
  <input type="checkbox" v-model="computedOptions.isChecked" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Your approach may seem unconventional from my perspective but, once again, there must be valid motivations behind it.

Explained simply in code, computed properties rely on other data/reactive variables. They become reactive only when the reactive properties change values and if the same property is used to compute other computed properties.

To achieve this, we need to set and get values using setter and getter methods.

new Vue({
  el: '#app',
  data: {
    message: 'Use computed property on input',
    foo:0,
    isChecked:true
  },
  computed:{
   bar:{
    get: function(){
        return this.foo;
    },
   set: function(val){
     this.foo = val;
    }
   },
   
    check:{
    get: function(){
        return this.isChecked;
    },
   set: function(val){
     this.isChecked = val;
    }
   }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }} Text</p>
  <input type="text" v-model="bar" /> 
  {{bar}}

<br/>
 <p>{{ message }} Checkbox</p>
    <input type="checkbox" v-model="check" /> 
    
    {{check}}
</div>

Instead of using a computed getter/setter, it is recommended to utilize a local data property that is initialized with the desired value from the localStorage. By implementing a deep watcher (which monitors changes in any subproperty), you can then update the localStorage when any changes occur. This approach enables you to continue utilizing v-model with the local data property while being able to track modifications on the object's subproperties.

Follow these steps:

1. Define a local data property named options and initialize it with the current value retrieved from localStorage:

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

2. Create a watch for the data property (options) with deep=true and define a handler function that updates the localStorage with the new value:

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

Check out the demo here

Seems like the issue lies both in the presence of options and the return value of the getter.

You can attempt the following solution:

let options;

try {
  options = JSON.parse(localStorage.getItem("options"));
}
catch(e) {
  // default values
  options = { test: true };
}

function saveOptions(updates) {
  localStorage.setItem("options", JSON.stringify({ ...options, ...updates }));
}

export default{
  template: `
    <form class="add-upload" @submit.prevent="return false">
      <label><input type="checkbox" v-model="test" /> test </label>
    </form>`,
  computed: {
    test: {
      get() {
        console.log('get');
        return options.test;
      },
      set(value) {
        console.log('set', value);
        saveOptions({ test: value });
      },
    },
  }
}

I hope this resolution is beneficial to you.

Unsure if there exists a computed set method that would be suitable in this scenario, however, there are several alternative approaches to tackle the issue.

If you require a single getter for modifying the data, utilizing an event-driven approach for setting the data could be beneficial. The following method is preferred:

export default {
  template: `
      <form class="add-upload" @submit.prevent="">
        <label for="test"> test </label>
        {{options.test}}
        <input id="test" type="checkbox" v-model="options.test" @input="setOptions({test: !options.test})"/>
      </form>
    `,
  data() {
    return {
      optionsData: {
        test: false
      }
    }
  },
  computed: {
    options: {
      get() {
        return this.optionsData;
      },
    },
  },
  methods: {
    setOptions(options) {
      this.$set(this, "optionsData", { ...this.optionsData, ...options })
    }
  }
}

If there is no need for complex logic within the get/set functions, using the data option directly can suffice

export default {
  template: `
      <form class="add-upload" @submit.prevent="">
        <label for="test"> test </label>
        {{options.test}}
        <input id="test" type="checkbox" v-model="options.test" />
      </form>
    `,
  data() {
    return {
      options: {
        test: false
      }
    }
  }
}

Additionally, there is the possibility of implementing get/set functions for each property individually

export default {
  template: `
      <form class="add-upload" @submit.prevent="">
        <label for="test"> test </label>
        {{test}}
        <input id="test" type="checkbox" v-model="test" />
      </form>
    `,
  data() {
    return {
      optionsData: {
        test: false
      }
    }
  },
  computed: {
    test: {
      get() {
        return this.optionsData.test;
      },
      set(value) {
        this.optionsData.test = value
      }
    },
  },
}

Vue computed properties do not automatically become reactive when you return a plain object and assign to a property within the computed property, as the setter will not trigger.

To address this issue, you need to solve two problems. One solution is to store a reactive version of your computed property value using Vue.observable(). The second problem may involve hooking into the setter for specific reasons, such as performing side-effects. In that case, you should watch the value for changes using vm.$watch().

Based on these assumptions, here's how I would write that component:

export default {
  template: `
      <form class="add-upload" @submit.prevent="return false">
        <label><input type="checkbox" v-model="options.test" /> test </label>
      </form>
    `,
  computed: {
    options(vm) {
      return (
        vm._internalOptions ||
        (vm._internalOptions = Vue.observable({ test: false }))
      )
    },
  },
  watch: {
    "options.test"(value, previousValue) {
      console.log("set")
    },
  },
}

If you need to trigger side-effects based on changes in the options object, you can deeply watch it by setting deep: true in the watch option. However, keep in mind that the object must be reactive, which can be achieved by using Vue.observable() or defining it in the data option.

export default {
  watch: {
    options: {
      handler(value, previousValue) {
        console.log("set")
      },
      deep: true,
    },
  },
}