直接给vue数组赋值，无法渲染到页面

直接操作vm.passwordArr, 无法渲染, 需要设置theArr, 最后使vm.passwordArr=需要设置theArr

<div id="app">
	<input maxlength="6" type="text" v-model="password">
	<ul>
		<li v-for="(value, index) in passwordArr">
			<span v-if="value">1</span>
		</li>
	</ul>
	<button v-on:click="showLi">渲染</button>
</div>

<script>

    var vm = new Vue({
        el: "#app",
        data: {
            password: "",
            passwordArr: [1,1,1,0,0,0]
        },
        methods: {
            showLi: function() {
                var theArr = [];
                for (var i = 0; i < vm.passwordArr.length; i++) {
                    if (i<vm.password.length) {
                        theArr[i] = 1;
                    } else {
                        theArr[i] = 0;
                    }                         
                }
                vm.passwordArr = theArr;
            }
        }
    })

</script>

<script>

	var vm = new Vue({
		el: "#app",
		data: {
			password: "",
			passwordArr: [1,1,1,0,0,0]
		},
		methods: {
			showLi: function() {
				var theArr = [];
		        for (var i = 0; i < vm.passwordArr.length; i++) {
		        	if (i<vm.password.length) {
		        		// 这样写是无效的
		        		vm.passwordArr[i] = 1;
		        	} else {
		        		vm.passwordArr[i] = 0;
		        	}			        	 
		        }
			}
		}
	})

</script>