computed问题

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=0">
	<title>调查问卷</title>
	<style type="text/css" media="screen">
		.next{
			width: 100px;
			height: 30px;
			background-color: green;
			color: white;
			font-size: 14px;
			border: none;
			position: absolute;
			bottom: 20px;
			left: 40px;
		}
		.last{
			width: 100px;
			height: 30px;
			background-color: #abcdef;
			color: white;
			font-size: 14px;
			border: none;
			position: absolute;
			bottom: 20px;
			left: 160px;
		}
		.reset{
			width: 100px;
			height: 30px;
			background-color: #abcdef;
			color: white;
			font-size: 14px;
			border: none;
			position: absolute;
			bottom: 20px;
			right: 40px;
		}
		.page1 form, .page2 form, .page3 form{
			font-size: 30px;
		}
		.page2 input{
			display: inline-block;
			width: 15px;
			height: 15px;
		}
		.page3 textarea{
			width: 80%;
			height: 150px;
			text-indent: 20px;
			display: block;
			margin: 48px auto;
		}
	</style>
</head>
<body>
	<div id="app">
			<page val="1" ref="abc" v-model="mainvalue" :everypage="pages" class="page1">
				<h1>1.请问您的性别是？</h1>
				<form id="formtext1">
					男<input type="radio" name="sex" checked="checked">
					女<input type="radio" name="sex">	
					<btn :allpage="pages" v-model="mainvalue"></btn>
				</form>
			</page>
			<page val="2" ref="abc" v-model="mainvalue" :everypage="pages" class="page2">
				<h1>2.请选择您的兴趣爱好：</h1>
				<form id="formtext2">
					看书<input type="checkbox" name="hobby" value="看书"><br/>
					游泳<input type="checkbox" name="hobby" value="游泳"><br/>
					跑步<input type="checkbox" name="hobby" value="跑步"><br/>
					看电影<input type="checkbox" name="hobby" value="看电影"><br/>
					听音乐<input type="checkbox" name="hobby" value="听音乐"><br/>
					<btn :allpage="pages" v-model="mainvalue"></btn>
				</form>
				<h3>请最少选择两个爱好！</h3>
			</page>
			<page val="3" ref="abc" v-model="mainvalue" :everypage="pages" class="page3">
				<h1>3.请介绍一下自己：</h1>
				<form id="formtext3">
					<textarea name="imf" placeholder="不少于100字" minlength="100" autofocus></textarea>
					<btn :allpage="pages" v-model="mainvalue"></btn>
				</form>
			</page>
	</div>

  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
	<script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
	<script src="btn.js"></script>
	<script src="page.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				mainvalue: '1',
				pages: []
			},
			methods: {					
				update: function() {
					var this_page = this.$children.filter(function(item) {
							return item.$options.name === 'page';
						});
					this.$root.pages = this_page;
					console.log(this.pages);
					this.$refs.abc.appear();
					}
			},
			mounted() {
				this.update();
			}
		});
	</script>
</body>
</html>

Vue.component('page', {
	name: 'page',
	template: '\
		<div class="page" v-show="show">\
			<slot></slot>\
		</div>',

	props: {
		val: {
			type: String
		},
		value: {
			type: [String, Number]
		},
		everypage: {
			type: Array
		}
	},

	data() {
		return {
			show: false,
			pageList: [],
			currentValue: this.value,
		}
	},

	methods: {
		appear: function() {
			var _this = this;
			this.pageList.forEach( function(item) {
				return item.show = item.val === _this.currentValue;
			});
		}
	},

	watch: {
		everypage: function(newval, oldval) {
			this.pageList = newval;
			this.appear();
		},
		value: function(newval, oldval) {
			this.currentValue = newval;
		}
	}
});

Vue.component('btn', {
    name: 'btn',
    template: '\
			<p class="container">\
				<button type="submit" @click="toNext()" class="next" :able="able" @click.prevent>下一步</button>\
				<button type="submit" @click="toLast()" class="last" @click.prevent>上一步</button>\
				<button type="submit" @click="reSet()" class="reset" @click.prevent>重置</button>\
			</p>',

    props: {
        allpage: {
            type: Array
        },
        value: {
            type: [String, Number]
        }
    },

    data() {
        return {
            thisValue: this.value
        }
    },

    computed: {
        able: function() {
            	if(this.$root.mainvalue === '2') { 
            		var hobbyBox = $('input[name=hobby]');
                var hobbyList = [];
                for (var i = 0; i < hobbyBox.length; i++) {
                    if (hobbyBox[i].checked) {
                        hobbyList.push(hobbyBox[i].value);
                    }
                }
				        if(hobbyList.length < 2) {
				        	$('.page2 .container .next').css('background-color', 'red');
				        }else {
				        	$('.page2 .container .next').css('background-color', 'green');
				        }
              }	
        }
      },

    methods: {
        toNext: function() {
            if (this.$root.mainvalue === '2') {
                var hobbyBox = $('input[name=hobby]');
                var hobbyList = [];
                for (var i = 0; i < hobbyBox.length; i++) {
                    if (hobbyBox[i].checked) {
                        hobbyList.push(hobbyBox[i].value);
                    }
                }
                if (hobbyList.length > 2 || hobbyList.length === 2) {
                    thisValue = String(Number(this.value) + 1);
                    if (Number(this.$parent.currentValue) < 3) {
                        this.$parent.currentValue = thisValue;
                        this.$root.mainvalue = thisValue;
                        this.$parent.appear();
                    } else {
                        this.$parent.currentValue = '1';
                        this.$root.mainvalue = '1';
                        this.$parent.appear();
                    }
                }
            } else {
                thisValue = String(Number(this.value) + 1);
                if (Number(this.$parent.currentValue) < 3) {
                    this.$parent.currentValue = thisValue;
                    this.$root.mainvalue = thisValue;
                    this.$parent.appear();
                } else {
                    this.$parent.currentValue = '1';
                    this.$root.mainvalue = '1';
                    this.$parent.appear();
                }
            }
        },
        toLast: function() {
            thisValue = String(Number(this.value) - 1);
            if (Number(this.$parent.currentValue) > 1) {
                this.$parent.currentValue = thisValue;
                this.$root.mainvalue = thisValue;
                this.$parent.appear();
            } else {
                // thisValue = '0';
                this.$parent.currentValue = '3';
                this.$root.mainvalue = '3';
                this.$parent.appear();
            }
        },
        reSet: function() {
            var formtext = document.getElementsByTagName('form');
            		if (event.target.parentNode.parentNode.id === 'formtext1') {
                    document.getElementById('formtext1').reset();
                } else if (event.target.parentNode.parentNode.id === 'formtext2') {
                    document.getElementById('formtext2').reset();
                } else {
                    document.getElementById('formtext3').reset();
                }
        }
    },

    watch: {
        value: function(newval, oldval) {
            this.thisValue = newval;
        }

    }
});