通过 vue-cli 创建 uni-app 项目。在项目中新建任意组件，通过ref获取组件对象报错

Property or method "toJSON" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in pages/index/index.vue)(env: Windows,mp,1.05.2105272; lib: 2.17.0

具体代码如下

index.vue

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view>
            <text class="title">{{ title }}</text>
        </view>
        <Navbar ref="liveBarrage"></Navbar>
    </view>
</template>


<script>
import Navbar from '@/components/Navbar';
export default {
    components: {
        Navbar,
    },
    data() {
        return {
            barrageContext: null,
            title: 'Hello',
        };
    },
    onLoad() {},
    onShow() {
        // 获取页面数据
        this.barrageContext = this.$refs.liveBarrage;
    },
    methods: {},
};
</script>


<style>
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.logo {
    height: 200rpx;
    width: 200rpx;
    margin: 200rpx auto 50rpx auto;
}


.text-area {
    display: flex;
    justify-content: center;
}


.title {
    font-size: 36rpx;
    color: #8f8f94;
}
</style>

navbar.vue

<template>
    <view></view>
</template>


<script>
export default {};
</script>


<style></style>

aas