vue todos功能不知道如何实现

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

一键切换功能不知道要如何实现 还有完成事项未完成事项啥的如何实现点击跳转

问题相关代码，请勿粘贴截图

<h1 align="center" style="color:red ; font-size:50px">todos</h1>

<div id="todos" class="demo" style="text-align:center;vertical-align:middle;">

    <input type=text placeholder="What needs to be done?" @keyup.enter="handleSend" v-model="text" />
    <ul>
        <li v-for="(item, index) in todoList" :key="index">

            <h3 :class="{complete: item.status === 1}">{{item.value}}<button @click="remove(index)">删除</button>
                <button @click="changeStatus(index)">切换</button>
            </h3>

        </li>


    </ul>


    <ul class="filters">
        <li><a href="#/all" :class="{selected: visibility == 'todoList'}"> 全部事项 </a>
            <a href="#/active" :class="{selected: visibility == 'active'}"> 未完成事项 </a>
            <a href="#/complete" :class="{selected: visibility == 'complete'}"> 完成事项 </a>
        </li>
    </ul>

    <button @click="completed(index)">一键切换</button>
    <button @click=" clear">一键清空</button>
    <h1> {{length}} items left</h1>
</div>

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果