Here goes the assignment!
<div id="root">
    <h1>
        {{ ReversedMessage }}
    </h1>

    <h1>Completed Tasks</h1>
    <ul>
        <li v-for="task in tasks" v-text="task.description" v-if='task.completed'></li>
    </ul>

    <h1>Incomplete Tasks</h1>
    <ul>
        <li v-for="task in tasks" v-text="task.description" v-if='!task.completed'></li>
    </ul>
    
    <h1>Incomplete Tasks 2nd Method</h1>
    <ul>
        <li v-for="task in incompleteTasks" v-text="task.description" ></li>
    </ul>

    <!-- //to render button then you should not use v-text as it will override all elements inside li tag -->
    <h1>Assignment</h1>
    <h1>Incomplete Tasks</h1>
    <ul>
        <li v-for="task in tasks" v-if='!task.completed'>
            {{task.description}}
            <button @click="completed(task)">Completed</button>
        </li>
    </ul>

    <h1>Incomplete Tasks 2nd Method</h1>
    <ul>
        <li v-for="task in incompleteTasks">
            {{task.description}}
            <button @click="completed(task)">Completed</button>
        </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    app = new Vue({
        el: '#root',
        data: {
           message: 'WS',

           tasks: [
                {description: 'Learn Vue',completed:true},
                {description: 'Practise',completed:true},
                {description: 'Send Bids on Fiverr',completed:false},
                {description: 'Send Bids on Upwork',completed:true},
                {description: 'Update Gigs',completed:false},        
           ]
        },

        methods:{

            completed(task){
                task.completed = true;
            }
        },

        computed:{
            ReversedMessage(){
               return this.message.split('').reverse().join('');
            },

            incompleteTasks(){
                
                //this syntax is es6 or es2015
               return this.tasks.filter(task=>!task.completed);

                //the below is equivalent to above syntax
            //    this.tasks.filter(function (task){
            //        return !task.completed;
            //    })
            }
        }
    })
</script>
The Need for Computed Properties

Updated Series Available
