How to render a vue component on an event?

Question

Vue.js

Hey!
I can't figure out how to do the following. There is a vue-component, like this one:

Vue.component('project-status', {
    props: ['status'], //{status: Boolean},  // Входные параметры vue-компонента
    template: `
        <div class="row">
            <div class="col-6">Status:</div>
            <div class="col-6">
                <span class="badge"
                      v-bind:class="{ 'badge-success': status,  'badge-danger': status == false }"
                      v-text="status ? 'Enabled' : 'Disabled'">
                </span>
            </div>
        </div>
    `
});

Next, there is a certain root vue in which the "project-saved" event is fired somewhere in the code:

var vue_project = new Vue({
    data: {
        window_title: '',
        project: {
            id: null,
            dt_from: null,
            name: '',
            description: '',
            is_enabled: false,
        },
    },
    ....
    this.$emit('project-saved'); 
    ....
});

If you use a component like this, then the parameters passed to it are not associated with the root vue and remain local variables:

<project-status status="project.is_enabled"></project-status>

And if you call the component with the "v-bind" directive, then there is a continuous connection between status and project.is_enabled :

<project-status v-bind:status="project.is_enabled"></project-status>

Question: How can I make the component re-render in the DOM only on the project-saved event and not be continuously bound to a variable in the root vue? Or maybe it can be solved not by events, then how?

Answer 1

Make a copy of project.is_enabled, work with it, and update the original on the project-saved event.