Remove $set and $delete

front/src/components/Sidebar.vue

@@ -118,8 +118,8 @@
                 {{ $store.state.ui.notifications.inbox + additionalNotifications }}
               </div>
               <user-menu
-                :width="width"
                 v-bind="$attrs"
+                :width="width"
               />
             </div>
           </div>

front/src/components/auth/SignupForm.vue

@@ -126,18 +126,16 @@
         <textarea
           v-if="field.input_type === 'long_text'"
           :id="`custom-field-${idx}`"
-          :value="customFields[field.label]"
+          v-model="customFields[field.label]"
           :required="field.required || null"
           rows="5"
-          @input="$set(customFields, field.label, $event.target.value)"
         />
         <input
           v-else
           :id="`custom-field-${idx}`"
+          v-model="customFields[field.label]"
           type="text"
-          :value="customFields[field.label]"
           :required="field.required || null"
-          @input="$set(customFields, field.label, $event.target.value)"
         >
       </div>
     </template>

front/src/components/manage/library/EditsCardList.vue

@@ -242,10 +242,10 @@ export default {
         }
         axios.get(config.url, { params: { id: uniq(config.ids), hidden: 'null' } }).then((response) => {
           response.data.results.forEach((e) => {
-            self.$set(self.targets[k], e.id, {
+            self.targets[k][e.id] = {
               payload: e,
               currentState: edits.getCurrentStateForObj(e, edits.getConfigs.bind(self)()[k])
-            })
+            }
           })
         }, error => {
           self.errors = error.backendErrors

front/src/main.ts

@@ -50,9 +50,6 @@ Promise.all(modules).finally(() => {
 })
 
 // TODO (wvffle): Migrate to pinia
-// TODO (wvffle): Remove global Vue (Only vuex files affected)
-// TODO (wvffle): Remove shims-vue2.d.ts
-// TODO (wvffle): Replace $set and $delete with reactive()
 // TODO (wvffle): Check for mixin merging: https://v3-migration.vuejs.org/breaking-changes/data-option.html#mixin-merge-behavior-change=
 // TODO (wvffle): Use emits options: https://v3-migration.vuejs.org/breaking-changes/emits-option.html
 // TODO (wvffle): Find all array watchers and make them deep

front/src/shims-vue2.d.ts

@@ -1,8 +0,0 @@
-declare module 'vue' {
-  import { CompatVue } from '@vue/runtime-dom'
-  const Vue: CompatVue
-  export default Vue
-  export * from '@vue/runtime-dom'
-  const { configureCompat } = Vue
-  export { configureCompat }
-}

front/src/store/auth.js

@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import axios from 'axios'
 import useLogger from '~/composables/useLogger'
 
@@ -12,8 +11,8 @@ function getDefaultScopedTokens () {
 
 function asForm (obj) {
   const data = new FormData()
-  Object.entries(obj).forEach((e) => {
-    data.set(e[0], e[1])
+  Object.entries(obj).forEach(([key, value]) => {
+    data.set(key, value)
   })
   return data
 }
@@ -112,7 +111,7 @@ export default {
     },
     profilePartialUpdate: (state, payload) => {
       Object.keys(payload).forEach((k) => {
-        Vue.set(state.profile, k, payload[k])
+        state.profile[k] = payload[k]
       })
     },
     oauthApp: (state, payload) => {