Properly introduce @vue/composition-api to the project

[stefandesu]

@vue/composition-api allows us to use Vue 3's composition API in Vue 2. I want to (slowly) introduce the composition API in Cocoda. First, it would be helpful to have it for #608, and in the long run it would make the move to Vue 3 easier (#583). We could slowly replace mixins as well. This would make the project more structured and future changes will be easier.

Note that since moving to Vite, @vue/composition-api is already a dependency of Cocoda, but it is not yet fully added to the project. To add it to the project, first add a new file src/composition/index.js:

import Vue from "vue"
import VueCompositionApi from "@vue/composition-api"
Vue.use(VueCompositionApi)
export * from "@vue/composition-api"

Then, whenever we need methods from the composition API, we can use import { reactive } from "@/composition".

Note that this also requires on change to the Vite config to use the @ alias (which refers to the src/ directory and makes it easier to deal with nested imports):

{
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  }
}

We can then change many of the imports to use this @ alias.

[stefandesu]

composition-api is now properly added to the project. Note that you can also use `import { reactive } from "@vue/composition-api" now to get typeahead support etc.

While composition-api isn't used anywhere in the project yet (apart from the entry points), this issue was only about the preparation to be used elsewhere (for example for #608), so I'm closing this issue.

However, it makes sense to slowly change components and mixins to use the composition-api.