JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="root">

        <h1>
            All Tasks
        </h1>

        <ul>
            <li v-for="task in tasks" v-text="task.description"></li>
        </ul>
        <button @click="hideIncompleteTasks">show only completed</button>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</body>

</html>

JavaScript

new Vue({

            el: "#root",

            data: {

                tasks: [

                    { description: "go to the store", completed: true },
                    { description: "finish screencast", completed: false },
                    { description: "make donation", completed: false },
                    { description: "clear inbox", completed: false },
                    { description: "make dinner ", completed: false },
                    { description: "clean room", completed: true },

                ]

            },
            methods: {

                hideIncompleteTasks() {
                    if (!this.tasks.completed) {

                    }
                }

            },

        })