How to solve the problem that the vuex method in the parent component updates the state and the child component cannot be updated and rendered in time

<template>

 <p id="newsDetails">

  <mt-header title="详情">

   <router-link to="/" slot="left">

    <mt-button icon="back"></mt-button>

   </router-link>

  </mt-header>

  <p class="details clearfloat">

   <h1 class="titleFont">

    {{ title }}

   </h1>

   <p class="clearfloat sourceWrap">

    <ul class="sourceFont">

     <li v-if="(pubNews==true)">

      <span class="source">{{pubName}}</span>

     </li>

     <li>

      <span class="authorName">{{authorName}}</span>

      <span class="time">{{createAt|formatTime}}</span>

     </li>

    </ul>

    <span v-if="(pubNews==true)" class=&#39;btnFollow&#39; @click="follow">关注</span>

   </p>

   <p class="bodyFont clearfloat" id="bodyFont" ref="bodyFont" :class="{bodyHeight:contentStatus}">

    <p v-html="content"></p>

    <p class="editor" v-if="editorName">责任编辑：{{editorName}}</p>

   </p>

   <p class="contentToggle" @click="contentStatus=!contentStatus" v-if="contentStatus">阅读全文</p>

   <Related :related="related"></Related>

　　　　<!--重点是这里 父组件向子组件传值-->

 </p> </p> </template>

import { Toast } from 'mint-ui';

 import {mapState} from 'vuex'

 import Related from './Related.vue'

 import moment from 'moment';

 export default{

  name:"NewsDetails",

  components:{

   Related,

  },

  data(){

   return {

    id:this.$route.params.id,

    topicType:"news",

    contentStatus:false,

    curHeight:0,

    bodyHeight:5000,

    hotCommentScrollTop:0

   }

  },

  created(){

   this.id=this.$route.params.id;

   this.fetchData();

   moment.locale('zh-cn');

  },

  mounted(){

   setTimeout(()=>{

    this.contentToggle();

   },500)

  },

  watch: {

   '$route'(to,from){

    this.id=this.$route.params.id;

    this.fetchData();

   }

  },

  computed: {

   ...mapState({

    title: state => state.newsDetails.title,

    authorName: state => state.newsDetails.authorName,

    pubNews: state => state.newsDetails.pubNews,

    pubName: state => state.newsDetails.pubName,

    editorName: state => state.newsDetails.editorName,

    createAt: state => state.newsDetails.createAt,

    content: state => state.newsDetails.content,

    myFavourite: state => state.newsDetails.myFavourite,

    related: state => state.newsDetails.related,

   })

  },

  filters:{

   formatTime(time){

    return moment(time).fromNow();

   },

  },

  methods:{

   fetchData(){

    this.$store.dispatch('getDetails',this.id);

   },

   follow(){

    Toast('登录后进行关注');

    this.$router.push("/login");

   },

   contentToggle(){

    this.curHeight=this.$refs.bodyFont.offsetHeight;

    if(parseFloat(this.curHeight)>parseFloat(this.bodyHeight)){

     this.contentStatus=true;

    }else{

     this.contentStatus=false;

    }

//    this.hotCommentScrollTop=this.$refs.hotComment.height;

    console.log(this.hotCommentScrollTop);

   },

  }

 }

<template>

  <p v-if="lists.length>0">

    <p class="tagTitle"><span>相关新闻</span></p>

    <p class="listItem" v-if="(item.type==&#39;little&#39;)" v-for="(item,index) in lists" :to="{name:&#39;details&#39;,params:{id:item.id}}" :key="index" @click="browserDetection()">

     <p class="listImg1">

      <!--<img :src="{lazy==loaded?item.thumb[0]:lazy==loading?&#39;../../assets/images/little_loading.png&#39;:lazy==error?&#39;../../assets/images/little_loading.png&#39;}" alt="" v-lazy="item.thumb[0]">-->

      <img :src="item.thumb[0]" alt="" v-lazy="item.thumb[0]">

     </p>

     <p class=&#39;titleBox1&#39;>

      <p class="listTitle">{{item.title}}</p>

      <p class="titleInfo">

       <span class="openApp">打开唐人家</span>

       <span v-if="item.top==true" class="toTop">置顶</span>

       <!--<svg class="icon" aria-hidden="true">

        <use xlink:href="#icon-dianzan" rel="external nofollow" ></use>

       </svg>-->

       <span class="like">阅读 {{item.read}}</span>

       <span class="time">{{item.createAt|formatTime}}</span>

      </p>

    </p>

   </p>

  </p>

</template>

<script>

 import {mapActions, mapState, mapGetters} from 'vuex'

 import moment from 'moment'

 export default{

  data(){

   return {

    lists: [],

    id:this.$route.params.id,

   }

  },

  props:{

    related:Array  //重点是这里

  },

  created(){

   moment.locale('zh-cn');

  },

  /*computed: {

   ...mapState({

    related: state => state.newsDetails.related,

   })

  },*/

  filters:{

   formatTime(time){

    return moment(time).fromNow();

   },

  },

  methods:{

  },

  watch: {

   related (val) {

    this.lists = val;

   },

   '$route'(to,from){

    this.id=this.$route.params.id

   }

  }

 }

</script>