[Vuejs]-Expanding a table's row when clicked on, to show another table

You can achieve it using the template tag.

Something like this:

<tbody id="search">
    <template v-for="task in displayedData">
        <tr v-bind:key="task.id" @click="showMoreDetail(task.id)">
            <td><input type="checkbox" :checked="isCheckAll" /></td>
            <td>{{task.id }}</td>                    
            <td>{{task.name }}</td>
            <td>{{task.hosts}}</td>
        </tr>
        <tr v-bind:key="task.id + '_details'" v-if="idDetails == task.id">
            <td colspan=4>
                <div>
                    <p>more info here</p>
                </div>
            </td>
        </tr>
    </template>
</tbody>

<script>
    export default { 
        data() {
            return {
                idDetails: null,
            }
        },
        methods: {
            showMoreDetail(id) {
                this.idDetails = id;
            }
        }
    }
</script>