Linking two Vue.js components

Question

I have one single file component that is used to show data and another one that is used to edit the same data. The view has labels and paragraphs where as the edit component has inputs and textareas.

Both of these components take the same data object. Is there a way that by editing the fields (bound with v-model in the edit component) the changes a reflected to the view component?

For example, here's my paragraph.vue that is used to show the data

<template>
    <div class="row">
        <div class="col-xs-12">
            <p>{{ text }}</p>
        </div>
    </div>
</template>

and here's the edit dialog

<template>
    <div class="form-group">
        <label for="paragaph-text">Paragraph</label>
        <textarea id="paragaph-text" class="form-control" v-model.trim="text"></textarea>
    </div>
</template>

Answer 1

If you have multiple components using the same data, you can use a share state as explained in the documentation.

But if the number of components increases, and there are many changes happening, you may need a Centralized State Management like vuex, which is generally preferred in due community.