Fix all breaking changes in Vue 3

[ShGKme]

https://v3-migration.vuejs.org

Feel free to create sub issues

Global API

Done

• Global Vue API is changed to use an application instance
  • Prepare vue3 branch #12352
  • fix(directive): unify tooltip registration #12358
  • refactor(plugins): add reusable requestRoomSelection util to run room selector #12356
• Global and internal APIs have been restructured to be tree-shakable

Template Directives

Done

• v-model usage on components has been reworked, replacing v-bind.sync - @Antreesy
• key usage on and non-v-for nodes has changed #12370 - @DorraJaouad
• v-if and v-for precedence when used on the same element has changed
• v-bind="object" is now order-sensitive
• v-on:event.native modifier has been removed - @DorraJaouad fix(vue3): remove v-on.native modifier #12374

Components

• Functional components can only be created using a plain function (checked by @ShGKme)
• functional attribute on single-file component (SFC) <template> and functional component option are deprecated - (checked by @ShGKme)
• Async components now require defineAsyncComponent method to be created - chore(vue3): migrate async component registration and remove $children #12381
• Component events should now be declared with the emits option

Render Function

• Render function API changed
• $scopedSlots property is removed and all slots are exposed via $slots as functions (checked by @ShGKme)
• $listeners has been removed / merged into $attrs - [vue3] Fix $attrs and $listeners breaking changes #12367
• $attrs now includes class and style attributes - [vue3] Fix $attrs and $listeners breaking changes #12367

Custom Elements

• Custom element checks are now performed during template compilation (checked by @ShGKme)
• Special is attribute usage is restricted to the reserved tag only (checked by @ShGKme)

Other Minor Changes

• The destroyed lifecycle option has been renamed to unmounted chore(vue3): eslint #12378
• The beforeDestroy lifecycle option has been renamed to beforeUnmount chore(vue3): eslint #12378
• Props default factory function no longer has access to this context (checked by @ShGKme)
• Custom directive API changed to align with component lifecycle and binding.expression removed (checked by @ShGKme)
• The data option should always be declared as a function (checked by @ShGKme)
• The data option from mixins is now merged shallowly (checked by @ShGKme)
• Attributes coercion strategy changed
• Some transition classes got a rename (checked by @DorraJaouad )
• now renders no wrapper element by default #12396
• When watching an array, the callback will only trigger when the array is replaced. If you need to trigger on mutation, the deep option must be specified. (@ShGKme)
• <template> tags with no special directives (v-if/else-if/else, v-for, or v-slot) are now treated as plain elements and will result in a native element instead of rendering its inner content. (checked by @ShGKme)
• Mounted application does not replace the element it's mounted to
• Lifecycle hook: events prefix changed to vnode- (checked by @ShGKme)

Removed APIs

• keyCode support as v-on modifiers (checked by @ShGKme)
• $on, $off and $once instance methods Prepare vue3 branch #12352
• Filters (checked by @ShGKme)
• Inline templates attributes (checked by @ShGKme)
• $children instance property - chore(vue3): migrate async component registration and remove $children #12381
• propsData option Prepare vue3 branch #12352
• $destroy instance method. Users should no longer manually manage the lifecycle of individual Vue components. Prepare vue3 branch #12352
• Global functions set and delete, and the instance methods $set and $delete. They are no longer required with proxy-based change detection. Prepare vue3 branch #12352