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>

		<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,
		};
	},

	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);
		},


		// 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;
		}
	},

})