Vue组件通信数据没有更新渲染

问题遇到的现象和发生背景

组件通信时,已获取到数据,但页面数据没有更新渲染

问题相关代码,请勿粘贴截图
<template>
    <div class="box">
        <ul>
            <li v-for="item in books" :key="item.id">
                <h4>{{item.title}}</h4>
               <img :src="item.img" alt="">
            </li>
        </ul>
    </div>
</template>

<script>
import Mock from 'mockjs'
const list = Mock.mock({
            'books|4':[{
            id:'@id()',
             img:'@dataImage(200x100,"Demo")',
             text:'@cparagraph(3,5)',
            title:'@ctitle(3,6)'
              }
       
         ]
    
        })
export default {
    name: 'Home',
    props:{
        
    },
    data() {
        return {
            books:list.books
        };
    },
    methods:{
        send(){
            this.$bus.$emit('getBooks', this.books);
            console.log('已发送');
        }
    },
    mounted() {
        
    
    },
    created() {
      this.send()
    },
};
</script>


另一个组件

<template>
    <div>
       <div class="box">
            <div class="control">
                <span>添加图书</span>|<span>修改图书</span>
            </div>
            <div>
                请输入要查询的id:<input type="text" v-model="keywords">
            </div>
            <table border="1"  cellspacing="0" cellpadding="0">
                <tr>
                    <td>id</td>
                    <td>名称</td>
                </tr>
                <tr v-for="b in books" :key="b.id">
                    <td>{{b.id}}</td>
                    <td>{{b.title}}</td>
                </tr>
            </table>
       </div>
    </div>
</template>

<script>
export default {
    name: 'About',
    data() {
        return {
           books:'',
           keywords:''
        };
    },

    mounted() {
       
    },

    methods: {
        
    },
    created() {
        this.$bus.$on('getBooks',data=>{
            this.books = data.concat()
            console.log(this.books);
        })
    },
};
</script>


books:'' 改成books:[]

for循环没渲染,
简单粗暴:this.$forceUpdate() 在books赋值的地方加个强制刷新


 this.$bus.$on('getBooks',data=>{
            this.books = data.concat()
           this.$forceUpdate()
            console.log(this.books);
        })

books 是各数组 。你现在是 字符串