Vuejs nested components, templates, and using Modals

Question

I'm building a task app that has a few different templates for differing task types. Tasks are grouped by a user defined category.

I simply use a

v-for="category in categories"

To build my task containers and then in the the task container I have a few templates depending on the type of task:

<task v-if="task.type == 0" v-bind:task="task" ></task>
<item v-if="task.type == 1" v-bind:task-"task"></item>

This works great, task and item are defined as components and the task prop is used by each. The problem is with my task and item templates, specifically the nesting of a modal template.

<template id="#task">
    // Checkbox to mark a task as completed
    <input type="checkbox" v-bind.id={{ task.id }} v-on:click="complete" />
    <span v-on:click="displayModal">{{ task.name }}</p>
    // Modal to edit the specific task
    <modal v-bind:task="task"></modal>
</template>

I'm having a difficult time figuring out how the modal should related to the task component. I currently have the modal set up as a component of the task (this concerns me as I would need to repeat the functionality as a component of item as well and that doesn't feel very DRY.)

Below my task component js. The modal currently opens when a task is clicked, but the first tasks data is persisting. Any help is appreciated.

'task': {
        template: "#task",
        props: ['task'],
        data: function(){
            return {
                showModal: '',
            }
        },
        methods: {
            complete: function (){
                this.task.completed = 1;
                this.$http.patch('../tasks/' + this.task.id, {task : this.task}, function (task)
                {
                    // remove the task item
                });
            },
            displayModal: function() {
                this.showModal = $("#myModal").modal({ show: true});
            },
        },
        components: {
            'modal': {
                template: "#modal",
                props: ['task'],
                data: function() {
                    return {
                        task: [],
                    }
                }
            },
        }
    },

Answer 1

The way I sometimes handle this is to have there only be one modal component that you can pass the task data to when the task is clicked. Then the modal component opens and has all the edit/delete functions in one place to handle whatever task has been passed to it.

Upon saving, you can $dispatch the results to the parent vue instance and $broadcast back to the task that is being updated.