VUE 错误赋值数组，不二次渲染的问题，只用js实现水平菜单栏滚动翻页

事情经过：
由于项目的菜单栏菜单太多，导致乱排放，无法点击 因此进行水平菜单栏翻页，

网上方法很多，但是大多涉及css 对我而言盲区，cv操作各种css玄学报错，因此自己思考思路：
将菜单栏分为 全部菜单栏和显示菜单栏，定义一个翻译菜单下标作为计数君，点击前后页进行显示菜单栏重新赋值的操作并更新菜单栏。

相关代码

  <i class="lefti" @click="navPrev()"></i>
          <li class="layui-nav-item" v-for="(item,p_index) in menus" lay-unselect>
          	<a href="javascript:;" :style="{'border-top':p_index==index?'2px solid black':'none','margin-top':'1px'}" @click="top_click(item.children,p_index)">{{item.title}}</a>
          </li>
          <i class="righti" @click="navNext()"></i>

js

 navPrev(){
			  console.log(this.menusIndex);
		        if(this.menusIndex>=1){
		        	this.menusIndex=this.menusIndex-1;
		        	this.menu=[];
			        for(var i=0;i<6;i++){
				        this.menus.push(this.allmenus[this.menusIndex+i])
			        }
			        console.log(this.menus)
				}
		    },
		    // 当菜单项向左的可移动距离大于单个菜单项的宽度时，move减去一个菜单项的宽度（即左移移动一个菜单项的宽度），
			// 当菜单项向左的可移动距离小于单个菜单项的宽度时，move等于可以向左移动的最大值（即到最末尾）
		    navNext(){
		    	console.log(this.menusIndex);
		        if(this.menusIndex<=this.allmenus.length-6){
		        	this.menusIndex=this.menusIndex+1;
		        	this.menus=[];
			        for(var i=0;i<6;i++){
				        this.menus.push(this.allmenus[this.menusIndex+i])
				        }
				}
		    },

声明变量：menus:[],
menusIndex:0,
allMenus:[],

**

在此过程中出现问题，我再给显示的menus赋值时，写后台麻木，脑袋抽了用了this.menus[i]=xxxxxx这样赋值 导致菜单栏不更新！！！！！不进行二次渲染！！！特此记录防错

**

参考简书：参考1
参考vue文档：vue官方