If relationship fields sent from a backend are null - or in the case of a many to many relationship - the contents of an array have changed, pinia-orm does not appear to keep track of these changes by updating the id fields and/or pivot tables.

Please see https://github.com/salcedo/pinia-orm-relationship-unlinking for reproduction of this issue.

Thank you for creating this package!

Reproduction

I created a simple model but the .belongsToMany gives me the error Property 'belongsToMany' does not exist on type 'typeof ...

Steps to reproduce the behavior

1. Install piniaorm
2. Create a model (group.ts)

import { Model } from "pinia-orm";

import GroupMember from "./GroupMember";
import Member from "./Member";

export default class Group extends Model {
  static entity = "Group";

  static fields() {
    return {
      id: this.uid(),
      title: this.string(""),
      description: this.string(""),
      members: this.belongsToMany(Member, GroupMember, "group_id", "member_id"),
    };
  }
}

3. See that your editor (Webstorm in my case) says that belongsToMany does not exist.

Expected behavior

I would expect this.belongsToMany to exist and behave just like the original docs described it. https://vuex-orm.org/guide/model/relationships.html#many-to-many

Actual behavior

It says belongsToMany does not exist.

Additional information

If you didn't implement belongsToMany it might be good to put this in the README.md

Describe the feature

Keeping reactivity is incredible important to keep applications performant. However Pinia-ORM (& Vuex-ORM) generate a completely new javascript object for every single model in a collection everytime a mutation is triggered for something in that collection.

This has meant we’ve been forced to move away from Vuex-ORM for our app.

It’s great to see the progress on Pinia-ORM! Maybe this something Pinia-ORM could fix?

more info; https://github.com/vuex-orm/vuex-orm/issues/746

Additional information

• [x] Would you be willing to help implement this feature?
• [ ] Could this feature be implemented as a module?

Final checks

• [X] Check existing discussions and issues.

Describe the feature

I have a backend with contact and contact emails that get serialized out like this:

a contact:

{
  "id": 1,
  "name": "Wanda",
  "emails": [
    {
      "id": 10,
      "contact_ids": [1],
      "email_address": "[email protected]"
    }
  ]
}

On the backend, these models are related many-to-many. There should be a way for pinia-orm to be able to save either a contact or contact email and have the relationships work even when the backend data coming in is an array of ids instead of a serialized object, similar to hasManyBy but works with a pivot table.

Additional information

• [ ] Would you be willing to help implement this feature?
• [ ] Could this feature be implemented as a module?

Final checks

• [X] Check existing discussions and issues.

Thanks you for solving the flush thing! This is a very nice thing to have.

Now I have this other problem. I would love to add types to my models to get editor suggestions and the general benefits of Typescript. I tried to add the type definitions as outlined here: https://next.vuex-orm.org/guide/model/decorators.html. When I did this I did get the type information and nice type suggestions in my ide so that works.

But as soon as I defined a type for a field (either with or without a decorator) the field becomes null when queried.

Maybe I am missing something?

Reproduction

Use this simple model:

import { Model, Uid, Str } from "pinia-orm";

export default class Todo extends Model {
  static entity = "Todo";

  // static fields() {
  //   return {
  //     id: this.uid(),
  //     text: this.string(""),
  //     name: this.string(""),
  //   };
  // }
  //
  // id!: string;
  // text!: number;
  // name!: number;

  @Uid()
  id!: string;

  @Str("Todo Text")
  text!: string;

  @Str("Todo Name")
  name!: string;
}

You can try defining with the decorators or using the commented out fields static method and the type definitions.

Now have a component like this:

<template>
  <button @click="todo.save({text:"Fix TS support", name:"TS Todo"})">Add todo</button> 
  <button @click="todo.flush()">Clear Todos</button>
  <span>{{all_todo_text}}</span>
<template>

<script setup lang="ts">
import { computed } from "vue";
import Todo from "@/Todo";

const todo = useRepo(Todo);
const all_todo_text = computed(() => todo.all().map((t) => t.text));
</script>

Steps to reproduce the behavior

1. Build the above code
2. Click the add todo button
3. Notice that the todo texts are null
4. Comment out the decorators and comment in the static field method
5. Notice that the todos are now the default given in the decorator (Even though I did give a value in save)
6. Add another todo and notice that the new todos do have the value given in the .save
7. Now if you comment in the type definitions below the field method everything goes to null again.

Expected behavior

I would expect the values of the model to not be affect (turn to null) by the type definitions.

Actual behavior

When adding type definitions to models the values of the fields turn to null and in the case of decorators the values given in .save are ignored. With this the type definitions are not useable.

Flush does not work. It could be because this model has a list as a primary key?

import { Model } from "pinia-orm";

export default class HumanSavedShow extends Model {
  static entity = "HumanSavedShow";
  static primaryKey = ["human_id", "show_id"];

  static fields() {
    return {
      human_id: this.uid(),
      show_id: this.uid(),
      added_at: this.number(0)
    };
  }
}

<template>
  <button @click="testFlush">Flush does not work</click>
</template>


<script setup lang="ts">
import { useRepo } from "pinia-orm";
import HumanSavedShow from "@/models/HumanSavedShow";

const SAVEDSHOWS = useRepo(Spotify_HumanSavedShow)

function testFlush() {
  console.log('There are ', SAVEDSHOWS.all().length, 'Shows');
  useRepo(Spotify_HumanSavedShow).flush();
  SAVEDSHOWS.flush();
  console.log('There are ', SAVEDSHOWS.all().length, 'Shows');
  SAVEDSHOWS.new()
  console.log('There are ', SAVEDSHOWS.all().length, 'Shows');
}
</script>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

I would expect flush to delete all the records stored. https://next.vuex-orm.org/guide/repository/deleting-data.html#deleting-data

But it doesn't delete anything.

Environment

{
  "name": "test1",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@capacitor/app": "1.1.1",
    "@capacitor/core": "3.5.1",
    "@capacitor/haptics": "1.1.4",
    "@capacitor/keyboard": "1.2.2",
    "@capacitor/status-bar": "1.0.8",
    "@ionic/vue": "^6.0.0",
    "@ionic/vue-router": "^6.0.0",
    "axios": "^0.27.2",
    "core-js": "^3.6.5",
    "date-fns": "^2.28.0",
    "dayjs": "^1.11.5",
    "eslint-config-typescript": "^3.0.0",
    "install": "^0.13.0",
    "ionic-logging-service": "^14.0.0",
    "lodash": "^4.17.21",
    "npm": "^8.13.1",
    "pinia": "^2.0.14",
    "pinia-orm": "^1.0.0",
    "swiper": "^8.3.2",
    "tslint": "^6.1.3",
    "vue": "^3.2.21",
    "vue-promised": "^2.2.0",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@capacitor/cli": "3.5.1",
    "@ionic/cli": "6.19.1",
    "@types/jest": "^27.0.2",
    "@types/lodash": "^4.14.182",
    "@typescript-eslint/eslint-plugin": "^5.26.0",
    "@typescript-eslint/parser": "^5.26.0",
    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
    "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
    "@vue/cli-plugin-router": "~5.0.0-rc.1",
    "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
    "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
    "@vue/cli-service": "~5.0.0-rc.1",
    "@vue/test-utils": "^2.0.0-rc.16",
    "@vue/vue3-jest": "^27.0.0-alpha.3",
    "babel-jest": "^27.3.1",
    "cypress": "^8.7.0",
    "eslint": "^8.17.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-vue": "^9.4.0",
    "jest": "^27.3.1",
    "ts-jest": "^27.0.7",
    "typescript": "^4.3.5"
  },
  "description": "An Ionic project",
  "prettier": {
    "singleQuote": true,
    "printWidth": 120
  }
}

Reproduction

class EventItem extends Model {
  static entity = 'eventitem';
  static primaryKey = ['id'];

  static fields() {
    return {
      id: this.uid(),
      name: this.string(''),

      participants: this.belongsToMany(People, EventItemPeople, 'eventitem_id', 'people_id', 'id', 'id'),
      // providers relationship seems to overwrite participants relationship
      providers: this.belongsToMany(People, EventItemPeople2, 'eventitem_id2', 'people_id2', 'id', 'id'),
      animals: this.belongsToMany(Animal, EventItemAnimal, 'eventitem_id', 'animal_id', 'id', 'id'),
    };
  }
}

class EventItemPeople extends Model {
  static entity = 'eventitempeople';

  static primaryKey = ['eventitem_id', 'people_id'];
  //   static primaryKey = ['id'];

  static fields() {
    return {
      id: this.uid(),
      eventitem_id: this.uid(),
      people_id: this.uid(),
    };
  }
}

class EventItemPeople2 extends Model {
  static entity = 'eventitempeople2';

  //   static primaryKey = ['eventitem_id1', 'people_id1'];
  static primaryKey = ['id'];

  static fields() {
    return {
      id: this.uid(),
      eventitem_id2: this.uid(),
      people_id2: this.uid(),
    };
  }
}

class People extends Model {
  static entity = 'people';

  static primaryKey = ['id'];

  static fields() {
    return {
      id: this.uid(),
      name: this.string(''),
    };
  }
}

class Animal extends Model {
  static entity = 'animals';

  static primaryKey = ['id'];

  static fields() {
    return {
      id: this.uid(),
      name: this.string(''),
    };
  }
}

class EventItemAnimal extends Model {
  static entity = 'eventitemanimal';

  //   static primaryKey = ['eventitem_id1', 'people_id1'];
  static primaryKey = ['id'];

  static fields() {
    return {
      id: this.uid(),
      eventitem_id: this.uid(),
      animal_id: this.uid(),
    };
  }
}

export { EventItem, People };

    useRepo(EventItem).save([
      {
        id: -1,
        name: 'item 1',
        participants: [{ id: -1000, name: 'Carsten' }],
        providers: [{ id: -1001, name: 'Peter' }],
        animals: [{ id: -2000, name: 'dog 1' }],
      },
    ]);

Describe the bug

First of all: thanks for the great work on this!

I ran across a problem with multiple n-m relationships between two entities EventItem and People. People can be participants of EventItems and they can also be providers to EventItems.

It seems to me that the relationship that is declared last actually wins. So in the example above, there will be only the eventitempeople2 relationship. According to the vue dev-tools, the participant "Carsten" with id -1000 is inserted into the eventitempeople2 relationship. Switching the participant and provider relationships, creates exactly the opposite effect.

I added the Animals relationship just to check whether a different m - n relationship to another entity does work - and it does. This is a reduced example of the data model I actually used. In that model the second relationship to People ran via another entity in-between EventItem and Participant. But this caused the same issue.

Any ideas?

Additional context

No response

Logs

No response

Hi!

I'm currently working on a project in which I have to migrate from Vue2 with Vuex-ORM into Vue3 with Pinia-ORM. One of the requirements of the project is to persist the store during page reloads (which I try to accomplish with the pinia-plugin-persistedstate plugin). To configure this plugin I have to add an option to my store description.

The issue I'm facing is that I can't figure out how to access this store description inside of a Model. I can imagine that other plugins will work the same way (options in the store description), so it might be an interesting addition to the package!

My proposed solution is to add a static field to the Model in which you could add options that are inserted (with a spread operator) into the store description. Maybe something like static piniaOptions = {}?

v1.4.0 - 🎄

🎁 Enhancements

• pinia-orm: add hasManyThrough relation (#678)
• pinia-orm: Add the possibility to rollback changed models. Adding $isDirty(), $getOriginal() and $refresh. (#757)

🕯️ Fixes

• pinis-orm: Update hook not triggered with update method (fb1694f5af09557040823fe46e0d7a50468250d3)
• pinis-orm: @OnDelete on same model attrs leads to undefined error (#754)
• pinia-orm: Don't delete relations bind with onDelete if hook returns false (3531a06a68a1018927a2451d1a4e05ca40d8e2a6)

🤶 Performance

• pinia-orm: Improve hydrating check (#679)
• pinia-orm: Remove JSON.stringfy() for comparing objects (300482d55e25fe974699b464ab02acd45afe991d)

☃️ Refactors

• pinia-orm: Improve typescript handling with piniaStore() (a8628c8cf81728c549d07f14506aa435a6d8958e)

🎅 Documentation

• Add some missing model functions to api (ce54b2384c7efc1b594d2f0b819c9ee9cf4e5ccc)

❤️ Contributors

• Gregor Becker
• Santa Clause

Environment

Versions:

• Nuxt: [email protected]
• Vue: [email protected]
• Pinia-orm:
  • @pinia-orm/[email protected]
  • [email protected]

Reproduction

Eeeer, sorry I've tried but I'm not fluent enough for that. 😅 I'm happy to add you as a contributor to my (private) project if that helps.

Describe the bug

nuxt dev failed to build. The file @pinia-orm/nuxt/dist/runtime/nuxt2-plugin.mjs is looking for the package #build/orm-options which does not exists.

I really don't know how to help more, sorry. :/

In the browser:

Additional context

Logs

✖ Client
  Compiled with some errors in 153.82ms


 ERROR  Failed to compile with 1 errors                                    friendly-errors 14:42:55

This dependency was not found:                                             friendly-errors 14:42:55
                                                                           friendly-errors 14:42:55
* #build/orm-options in ./node_modules/@pinia-orm/nuxt/dist/runtime/nuxt2-plugin.mjs
                                                                           friendly-errors 14:42:55
To install it, you can run: npm install --save #build/orm-options          friendly-errors 14:42:55

Reproduction

I'm currently trying to migrate our vuex-orm project to use pinia + pinia-orm. Sadly though, I haven't been able to install pinia(-orm) without getting errors.

I already tried the steps mentioned in the docs about Nuxt2, making my package.json look like:

{
  // general package.json stuff,
  "resolutions": {
    "nanoid": "3.3.4"
  },
  "dependencies": {
    "@dansmaculotte/nuxt-zendesk": "0.4.1",
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/auth": "^4.9.1",
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/composition-api": "^0.32.*",
    "@nuxtjs/style-resources": "^1.0.0",
    "@pinia-orm/nuxt": "^1.0.18",
    "@pinia/nuxt": "0.2.1",
    "@tinymce/tinymce-vue": "^2.1.0",
    "@toast-ui/vue-image-editor": "^3.14.0",
    "@tobjoern/vue-color-gradient-picker": "git+https://github.com/Tobjoern/vue-color-gradient-picker.git",
    "@vuex-orm/core": "0.31.13",
    "core-js": "^3.8.3",
    "cross-env": "^5.2.0",
    "element-ui": "^2.13.0",
    "lodash": "^4.17.20",
    "lodash.throttle": "^4.1.1",
    "messagebird": "^3.6.2",
    "nanoid": "3.3.4",
    "nuxt": "^2.15.8",
    "nuxt-dropzone": "^1.0.4",
    "nuxt-gmaps": "^1.2.10",
    "nuxt-intercom": "^1.0.8",
    "nuxt-jsonld": "^1.5.0",
    "nuxt-property-decorator": "^2.9.1",
    "nuxt-purgecss": "^1.0.0",
    "nuxt-user-agent": "^1.2.2",
    "pinia": "^2.0.18",
    "pinia-orm": "^1.0.0-rc.5",
    "tinymce": "^5.5.1",
    "vue-agile": "^1.1.3",
    "vue-cool-lightbox": "^2.6.3",
    "vue-echo": "^1.0.2",
    "vue-i18n": "^8.21.1",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/eslint-parser": "^7.13.10",
    "@babel/preset-env": "^7.18.10",
    "@fortawesome/fontawesome-pro": "^5.15.0",
    "@nuxtjs/eslint-config": "^5.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/laravel-echo": "^1.0.3",
    "@nuxtjs/tailwindcss": "^3.4.2",
    "@types/jest": "^28.1.6",
    "@vue/test-utils": "^1.0",
    "@vue/vue2-jest": "^28.0.1",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^28.1.3",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^7.18.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.5.0",
    "jest": "^28.1.3",
    "jest-environment-jsdom": "^28.1.3",
    "jest-serializer-vue": "^2.0.2",
    "nodemon": "^1.18.10",
    "prettier": "^2.2.1",
    "pusher-js": "^5.1.1",
    "ts-jest": "^28.0.7",
    "typescript": "^4.7.4",
    "vue": "2.6.14",
    "vue-jest": "^3.0.7",
    "vue-server-renderer": "2.6.14",
    "vue-template-compiler": "2.6.14"
  }
}

I still get the errors from Nuxt stating:

Module parse failed: Unexpected token (287:39) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | const type = model[this.morphType]; | const id = model[this.morphId]; > const related = dictionary[type]?.[id] ?? null; | model.$setRelation(relation, related); | });

Making me think the ?? operator is not supported. My nuxt.config.js is as follows as well:

import webpack from 'webpack'

export default {
  mode: 'universal',
  // Disable annoying notice if we want to send anonymous data.
  telemetry: false,
  /*
   ** Headers of the page
   */
  head: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    ],
  },
  router: {
    prefetchLinks: false,
    middleware: ['Server/userAgent'],
  },

  /*
   ** Customize the progress-bar color
   */
  loading: { color: '#f00', height: '4px' },

  /*
   ** Global CSS
   */
  css: [
    { src: '@fortawesome/fontawesome-pro/css/all.min.css', lang: 'css' },
    '@/assets/css/tailwind.css',
  ],

  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    '@/plugins/ui-store',
    '@/plugins/axios',
    '@/plugins/graphql/plugin',
    '@/plugins/vue-agile',
    '@/plugins/path-handler.js',
    '@/plugins/storage.js',
    '@/plugins/jsonld',
  ],

  /*
   ** Server middleware
   */
  serverMiddleware: ['@/middleware/Server/noSsr'],

  /*
   ** Nuxt.js modules
   */
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    'nuxt-user-agent',
    '@pinia-orm/nuxt',
    // '~/modules/caching/caching'
  ],
  /*
  cache: {

    key(route, context) {
      if (context.req.originalUrl.startsWith('/cms')) {
        return false
      }

      return true
    },

    store: {
      type: 'filesystem',
      max: 100,
      ttl: 60
    }
  },

  auth: {
    debug: false,
    cookie: {
      options: {
        sameSite: 'strict',
      },
    },
    rewriteRedirects: true,
    redirect: {
      login: '/login',
      logout: '/login',
      callback: false,
      home: false,
    },
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/auth/login',
            method: 'post',
            propertyName: 'token',
          },
          logout: { url: '/auth/logout', method: 'post' },
          user: { url: '/auth/user', method: 'get', propertyName: 'user' },
        },
        // tokenRequired: true,
        // tokenType: 'bearer',
      },
    },
    plugins: [
      { src: '@/plugins/i18n', mode: 'client' },
      { src: '~/plugins/echo.js', mode: 'client' },
      '@/plugins/permissions',
    ],
  },
  buildModules: [
    '@nuxtjs/tailwindcss',
    'nuxt-purgecss',
    '@nuxt/typescript-build',
    '@nuxtjs/composition-api/module',
    ['@pinia/nuxt', { disableVuex: false }],
  ],

  /*
   ** PurgeCSS
   ** https://github.com/Developmint/nuxt-purgecss
   */
  purgeCSS: {
    // enabled: process.env.NODE_ENV === 'production', // or `false` when in dev/debug mode
    enabled: false, // TEMP SET ON FALSE TO REMOVE CSS BUGS FOR NOW
    whitelist: [
      'static/css/element-ui/theme-modual/index.css',
      'vue-color-gradient-picker/dist/index.css',
      'assets/css/main.css',
      'body',
      'html',
      'nuxt-progress',
    ],
    whitelistPatternsChildren: [/^el-/, /^fa-/, /^v-modal/],
  },
  buildDir: '.nuxt/build',
  build: {
    splitChunks: {
      layout: true,
      pages: true,
    },
    optimization: {
      splitChunks: {
        // Force Webpack to split some vendor packages
        cacheGroups: {
          // https://stackoverflow.com/questions/48985780/webpack-4-create-vendor-chunk
          tinyMceVendor: {
            test: /[\\/]node_modules[\\/](tinymce)[\\/]/,
            name: 'tinymcevendor',
          },
          lodashVendor: {
            test: /[\\/]node_modules[\\/](lodash)[\\/]/,
            name: 'lodashvendor',
          },
          elementUiVendor: {
            test: /[\\/]node_modules[\\/](element-ui)[\\/]/,
            name: 'elementuivendor',
          },
          vendor: {
            test: /[\\/]node_modules[\\/](!tinymce)(!lodash)(!element-ui)[\\/]/,
            name: 'vendor',
          },
        },
      },
    },
    transpile: ['vue-agile', 'pinia-orm'],
    /*
     ** PostCSS setup
     */
    babel: {
      plugins: [
        ['@babel/plugin-proposal-private-methods', { loose: true }],
        ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
        [
          'component',
          {
            libraryName: 'element-ui',
            styleLibraryName: '~static/css/element-ui/theme-modual/',
          },
        ],
      ],
    },
    postcss: {
      // Add plugin names as key and arguments as value
      // Disable a plugin by passing false as value
      plugins: {
        'postcss-url': {},
        cssnano: {
          preset: 'default',
          discardComments: { removeAll: true },
          zIndex: false,
        },
      },
      // Change the postcss-preset-env settings
      preset: {
        stage: 0,
        autoprefixer: {
          cascade: false,
          grid: false,
        },
      },
    },
    extractCSS: { ignoreOrder: true },
    plugins: [
      new webpack.ProvidePlugin({
        mapboxgl: 'mapbox-gl',
      }),
      new webpack.NormalModuleReplacementPlugin(
        /element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/,
        'element-ui/lib/locale/lang/en'
      ),
    ],
  },
}

Steps to reproduce the behavior

• I've tried installing all the latest versions of vue and such
• I've tried installing specific older versions without any luck

Expected behavior

A working Nuxt2 installation.

Actual behavior

The error mentioned above.

🔗 Linked issue

closes #801

❓ Type of change

• [x] 📖 Documentation (updates to the documentation or readme)
• [x] 🐞 Bug fix (a non-breaking change that fixes an issue)
• [ ] 👌 Enhancement (improving an existing functionality like performance)
• [ ] ✨ New feature (a non-breaking change that adds functionality)
• [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

• [ ] I have linked an issue or discussion.
• [ ] I have updated the documentation accordingly.

Environment

  "dependencies": {
    "pinia": "2.0.28",
    "pinia-orm": "1.4.0",
    "vue": "3.2.45"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  },

Reproduction

https://codesandbox.io/s/young-cloud-odi2kr?file=/src/App.vue

Describe the bug

if calling new from repository the hooks for creatingand created not getting called.

Click on "console" and afterwards on the buttons. you will see, that "new" wouldnt trigger these hooks

Additional context

No response

Logs

No response

🔗 Linked issue

related to #774

❓ Type of change

• [x] 📖 Documentation (updates to the documentation or readme)
• [ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
• [x] 👌 Enhancement (improving an existing functionality like performance)
• [ ] ✨ New feature (a non-breaking change that adds functionality)
• [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This refactoring brings more consistency to the insert, save & update functions. It also adds the missing update function on repository level.

📝 Checklist

• [ ] I have linked an issue or discussion.
• [ ] I have updated the documentation accordingly.

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @nuxtjs/eslint-config-typescript | ^10.0.0 -> ^12.0.0 | | | | |

Release Notes

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

• [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• [ ] chore(deps): update devdependency @nuxtjs/eslint-config-typescript to v12

Detected dependencies

• [ ] Check this box to trigger a request for Renovate to run again on this repository