为什么首层绑定的动态样式不能更新？

<template>  
    <view class="page" :class="{page1:searchList.length>0}">  
        <view v-if='searchList.length>0'>  
            {{searchList.length}}  
        </view>  
        <view v-else></view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                searchList: [],  
            }  
        },  
        onLoad() {  
            setTimeout(() => {  
                this.searchList = [{name: 1}];  
            }, 1000);  
        },  
        methods: {},  
    }  
</script>  

<style>  
    .page {}  
    .page1 {}  
</style>

在小程序里面运行的时候，首层的view class中没有page1，这是为什么？