Vue

HTML

<div id="app">

  <h2>return Condition: {{returnCondition}}</h2>

  <h3>Method 1 - v-model with set /get</h3>
  <div>
    <input v-model="calculatedValue" type="checkbox">
    calculatedValue: {{calculatedValue}}

  </div>


  <h3>Method 2 - @change (with overkill)</h3>
  <div>
    <input :checked="calculatedValue2" @change.stop.prevent="onChange" type="checkbox">
    calculatedValue: {{calculatedValue2}}

  </div>


  <h3>Method 3 - @click</h3>
  <div>
    <input :checked="calculatedValue3" @click="onClick" type="checkbox">
    calculatedValue: {{calculatedValue3}}

  </div>


  <h3>Method 4- @click.prevent</h3>
  <div>
    <input :checked="calculatedValue4" @click.prevent="onClick2" type="checkbox">
    calculatedValue: {{calculatedValue4}}

  </div>


  <h3>Method 5- solution</h3>
  <div>
    <input :checked="calculatedValue5" @click="correctAnswer" type="checkbox">
    calculatedValue: {{calculatedValue5}}

  </div>

  <h2>Settings</h2>
  <p>
    <button @click="toggleCondition">change condition</button>
    <button @click="setAll" :disabled="returnCondition === null">setAll</button>
  </p>

</div>

CSS

h2,
h3 {
  margin-top: 10px;
  font-weight: bold;
}

Vue

new Vue({
  el: "#app",

	data() {
		return {
			returnCondition: null,
			srcValue: false,
			calculatedValue2: false,
			calculatedValue3: false,
			calculatedValue4: false,
      calculatedValue5: false,
		};
	},

	computed: {
		calculatedValue: {
			set(newDomValue) {
				this.srcValue = this._calculateNewValue(newDomValue);
			},
			get() {
				return this.srcValue;
			}
		},
	},

	methods: {

		// Attempted solutions
		onChange(e){
			const newDomValue = e.target.checked;
			this.calculatedValue2 = this._calculateNewValue(newDomValue);
		},

		onClick(e){
			const newDomValue = e.target.checked;
			this.calculatedValue3 = this._calculateNewValue(newDomValue);
		},

		onClick2(e){
			const newDomValue = e.target.checked;
			this.calculatedValue4 = this._calculateNewValue(newDomValue);
		},

		correctAnswer(e){
    			const newDomValue = e.target.checked;
          this.calculatedValue5 = this._calculateNewValue(newDomValue);
          if(this.calculatedValue5 !== e.target.checked){
            e.preventDefault();
          } 
    },

		// Calcs
		_calculateNewValue(newDomValue){
			if (this.returnCondition !== null) {
				return this.returnCondition;
			}
			else {
				return newDomValue;
			}
		},

		// Settings
		toggleCondition() {
			let newCondition;
			switch (this.returnCondition) {
				case true:
					newCondition = false;
					break;
				case false:
					newCondition = null;
					break;
				case null:
					newCondition = true;
					break;
			}
			this.returnCondition = newCondition;
		},

		setAll(){
			this.srcValue = this.returnCondition;
			this.calculatedValue2 = this.returnCondition;
			this.calculatedValue3 = this.returnCondition;
			this.calculatedValue4 = this.returnCondition;
		}
	},

})