v-model in one component interfering with another component's v-model

Question

I am using vue js with buefy and I have two components. Namely a field-radiobox component and a field-textarea component.

In my post.cshtml page, I am able to select from the radio button and the selected value is displayed as appropriately in the input box below within the component.

However, the moment I edit something inside the textbox from the field-textbox component, my earlier selection from the field-radiobox component button is completely removed, and the input box below the radio buttons also no longer displays anything, implying that the v-model in that component was reset or interfered with while I typed in the textbox.

This only seems to happen with a textbox tag though. If I were to try using an input element instead of a textbox, the issue does not seem to happen.

Why is my v-model from one component interfering with another component's v-model?

post.cshtml

<div>
<form data-toggle="formcache" class="form rounded justify-content-center" id="form" asp-route-returnUrl="@ViewData["ReturnUrl"]" method="post" v-cloak>
    <div asp-validation-summary="All" class="text-danger"></div>

    <!--Select Advert type-->
    <field-radiobox 
        asp-property="TypeId"
        title="I want to" 
        :options="advertTypes" 
        value-key="id" 
        label-key="name"></field-radiobox>

    <!--TERMS-->
    <field-textarea asp-property="Terms" title="Terms"></field-textarea>
</form>
</div>
<script>
        var vm = new Vue({
            el: '#form',
            data:
            {
                loaded: false,
                advertTypes: @Html.Raw(Json.Serialize(Model.AdvertTypes))
            }
        });
</script>

field-radiobox.vue

<template>
    <!-- https://buefy.github.io/#/documentation/dropdown -->
    <div>
    <b-field :label="title" horizontal>
        <b-radio-button v-model="selectedValue"
                        v-for="option in options"
                        :native-value="getValue(option)" expanded>
            {{ getLabel(option) }}
        </b-radio-button>
    </b-field>
        <input :asp-for="aspProperty" v-model="selectedValue"/>
    </div>
</template>

<script>
    export default {
        name: "field-radiobox",
        data: function() {
            return {
                selectedValue: this.selectedValue
            }
        },
        props: {
            title: {
                type: String,
                required: true
            },
            options:{
                type:Array,
                required:true
            },
            valueKey:{
                type:String,
                required:true
            },
            labelKey:{
                type:String,
                required:true
            },
            selectedValue: {
                required:false
            },
            aspProperty:{
                type:String,
                required:false
            }
        },
        methods: {
            getLabel(obj) {
                //return this.labelKey;
                return !this.labelKey ? obj : obj[this.labelKey]
            },
            getValue(obj) {
                return !this.valueKey ? obj : obj[this.valueKey]
            }
        }
    }
</script>

field-text.vue

<template>
    <!-- https://buefy.github.io/#/documentation/dropdown -->
    <div>
        <b-field :label="title" horizontal>
            <textarea :class="inputClass" :readonly="readOnly"
                      :placeholder="placeholder" v-model="inputValue"></textarea>
        </b-field>
            <input :asp-for="aspProperty" v-model="inputValue"/>
    </div>
</template>

<script>
    export default {
        name: "field-textarea",
        data: function () {
            return {
                inputValue: this.inputValue
            }
        },
        props: {
            title: {
                type: String,
                required: true
            },
            inputClass: {
                type: String,
                required: false,
                default: "textarea"
            },
            placeholder: {
                type: String,
                required: false
            },
            readOnly: {
                type: Boolean,
                required: false,
                default: false
            },
            inputValue: {
                type: String,
                required: false,
                default: ""
            },
            aspProperty:{
                type:String,
                required:false
            }
        },
        methods: {
            getLabel(obj) {
                //return this.labelKey;
                return !this.labelKey ? obj : obj[this.labelKey]
            },
            getValue(obj) {
                return !this.valueKey ? obj : obj[this.valueKey]
            }
        }
    }
</script>

<style scoped>

</style>

Answer 1

You name your data items the same as prop items. When they are promoted to top-of-instance items, the prop is visible. Bind $data.inputValue or (better) don't name them the same thing.

(I would think you're getting warnings about modifying props.)