Return to Answer

2. Add applicant via the the local data properties:

    data: function() {
    return {
    applicant: {}
    }
    },
   

3. When the component is created, set the applicant to the value property:

    created: function() {
    this.applicant = this.value;
    }
   

4. Watch for changes on the local data property applicant and emit an event in response to that change

    watch: {
    'applicant': function() {
    // When the internal value changes, we $emit an event. Because this event is 
    // named 'input', v-model will automatically update the parent value
    this.$emit('applicant', this.applicant);
    }
    }
   

2. Add applicant via the the local data properties:

    data: function() {
    return {
    applicant: {}
    }
    },
   

3. When the component is created, set the applicant to the value property:

    created: function() {
    this.applicant = this.value;
    }
   

4. Watch for changes on the local data property applicant and emit an event in response to that change

    watch: {
    'applicant': function() {
    // When the internal value changes, we $emit an event. Because this event is 
    // named 'input', v-model will automatically update the parent value
    this.$emit('applicant', this.applicant);
    }
    }
   

Doesn’t it seem a bit redundant to have a compnent called applicant, which has a property called applicant? Perhaps a more generic name for those properties would be more appropriate - e.g. attributes. However, the advice below, which responds to your question, suggests binding the applicant to the model attribute instead of a property.

Doesn't it seem a bit redundant to have a component called applicant, which has a property called applicant? Perhaps a more generic name for those properties would be more appropriate - e.g. attributes. However, the advice below, which responds to your question, suggests binding the applicant to the model attribute instead of a property.

Your question appears nearly identical to this SO question, though in your case you have working code and are passing an object instead of a single value. To follow the guidelines in the documentation, perhaps altering the code as described in the answer by asemahle would be an optimal route.

##General feedback The use of the <script> tag as a template is nice and I have aimed to use that more frequently in my own projects when not using a larger template library.

Doesn’t it seem a bit redundant to have a compnent called applicant, which has a property called applicant? Perhaps a more generic name for those properties would be more appropriate - e.g. attributes. However, the advice below, which responds to your question, suggests binding the applicant to the model attribute instead of a property.

##Main question

Since I'm passing the parent applicant object to the component and am modifying it directly through that passed in reference using the v-model directive am I not directly modifying the parent object so therefore keeping the data coupled as the docs recommended against.

Your question appears nearly identical to this SO question, though in your case you have working code and are passing an object instead of a single value. To follow the guidelines in the documentation, perhaps altering the code as described in the answer by asemahle would be an optimal route.