Is the Vue Instance / Component only the ViewModel in the MVVM?

Question

As from the Vue Docs:

In Vue.js, every Vue instance is a ViewModel.

I am a little confused about that after reading so many articles on the design pattern like MVC, MVP, and MVVM.

We all know that in the Vue instance or Vue component (which is also a Vue instance), we have the <template>, which use HTML-based Syntax. Is the part not the View in MVVM?

And there are data(), computed in Vue component. Are they not the Model in MVVM?

Below is the structure of a Vue SFC, which I divide into Model, View, and ViewModel. If there is anything wrong with it. Please help me to correct that and also help me understanding MVVM more while using an MVVM based JavaScript-Framework.

<template>
    <!-- the template part should be the View in MVVM since they don't contain any business logic but only the UI components. Which perfectly match the description of the View in MVVM.-->
</template>
<script>
export default = {
    data () {
        return {
            // the data should be the Model in MVVM, because they stand for their own and are the "actually" content of the app
        }
    },
    computed: {
        // computed properties should also be the Model in MVVM. When using vuex, I can, for example, get data with HTTP GET request through the vuex actions and parse the data, store it in the vuex store. When I need to use them, I get them from the computed in any child component I would like to.
    },
    methods: {
        // this should belong to the ViewModel in MVVM.
    }
}
</script>
<style scoped>
/* the style should be the View in MVVM. Because they are only responsible for how to present the data to the user.*/
</style>

And therefore, I think the store.js (used for vuex as a centralized state management) also belongs to the Model. Because it contains almost all of the business logic and saves the data we got from other API or from the user by itself.

So after all, when we read, a framework is base on MVVM or MVC or MVW (which Angular says: Model View Whatever). What does it really mean and does it even matter for the actual web development?

Answer 1

I personally think for a basic vue instance you should't really read deep into design patterns.

When building big vue application, which involves multiples vuex state module and api layer. You can think about design pattern. But I feel it is still trivial for vue web applications. See below regarding some sort of answer(If I am wrong please correct me).

template - View

data & vuex store states - Model

getters & computed - ViewModel

actions & apiLayer - ViewController

mutations - ViewController -> ViewModel

viewController - When the view execute actions, which writes to the model. Like initiating a data fetch to the backend and populate the model with the fetched data.