整體思路：1、點選一個單選框，記錄當前的下標，存入陣列A中。

                 2、定義一個空陣列B，把請求到的資料賦值給這個陣列。

                 3、判斷A和B的長度是否相等來實現全選和反選。

下面貼出全部程式碼

<template>
	<div>
		<input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'>全選
		<ul v-for='checkb in checkboxData'>
			<li>
				<input type='checkbox' name='checkboxinput' class='input-checkbox' v-model='checkboxModel' :value='checkb.id'>{{checkb.value}}
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				checkboxData: [{
					id: '1',
					value: '蘋果'
				}, {
					id: '2',
					value: '荔枝'
				}, {
					id: '3',
					value: '香蕉'
				}, {
					id: '4',
					value: '火龍果'
				}],
				checkboxModel: [],
				checked: ""
			}
		},
		methods: {
			checkedAll: function() {
				var _this = this;
				if(this.checked) { //實現反選
					_this.checkboxModel = [];
				} else { //實現全選
					_this.checkboxModel = [];
					_this.checkboxData.forEach(function(item) {
						_this.checkboxModel.push(item.id);
					});
				}
			}
		},
		watch: { //深度 watcher
			'checkboxModel': {
				handler: function(val, oldVal) {
					if(this.checkboxModel.length === this.checkboxData.length) {
						this.checked = true;
					} else {
						this.checked = false;
					}
				},
				deep: true
			}
		},

	}
</script>