How to do modularization in a Vue.js application?

Question

JavaScript

For example, let's write a simple chat. There is an App, it has an object with a list of users, an object with a list of messages, a profile. Now the code looks something like this:

var app = new Vue({
    el: '#app',
    data: {
        users: {
            list: [
                {id: '123', name: 'Vasya'}
            ]
        },

        messages: {
            list: [
                {datetime: '', text:''}
            ]
        },

        profile: {
            name: 'Petrov',
            email: '[email protected]'
        }
    },
    methods: {
        usersAdd: function () { /* some code */},
        usersRemove: function () { /* some code */},
        usersUpdate: function () { /* some code */},
        usersSomeOtherMethod: function() { /* some code */},

        messagesAdd: function () { /* some code */},
        messagesRemove: function () { /* some code */},
        messagesUpdate: function () { /* some code */},

        profileUpdate:  function () { /* some code */},
        profileSave:  function () { /* some code */},
        profileSomeOtherMethod: function() { /* some code */},
    }
});

Is it possible to somehow structure the code into 3 logical models and work with them, and not with methods in the global scope?
How to make the code more OOP so that you can write a type this.profile.update();while maintaining reactivity?

Answer 1

So it begs to be broken down into three components - a profile, users and messages.
Well, look at vuex.

Answer 2

Break everything into components and write your own logic inside each.

Answer 3

As already mentioned, you can use vuex, it will store all the data and interact with the backend. Your components will take/pass data from there.
If you don’t want to bother with it, you can, for example, interact with the server in the root component, and then push the data into components - profile, users, messages, something else. In your version, you definitely need to split, even because if you do everything in one it will be a very large file that will be hard to work with and any change will cause pain and suffering)

Answer 4

The modularity of Vue applications requires, first of all, storage (although some may disagree - perhaps you can do without storage).
Vuex is quite simple and clear, you can learn the basics in half an hour by picking up the documentation.