wait a tick before emitting new Id in SelectMotion

src/components/select/select_motion.vue

@@ -49,9 +49,27 @@
 </template>
 
 <script setup>
-import { computed, defineEmits, defineProps } from 'vue'
+import { computed, defineEmits, defineProps, nextTick } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    required: true
+  },
+  selectedId: {
+    type: Number,
+    required: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  getAddValue: {
+    type: Function,
+    required: true
+  }
+})
 
-const props = defineProps(['modelValue', 'selectedId', 'disabled', 'getAddValue'])
 const emit = defineEmits(['update:modelValue', 'update:selectedId'])
 
 const moveUpValid = computed(() => {
@@ -60,12 +78,13 @@ const moveUpValid = computed(() => {
 
 const present = computed(() => props.modelValue[props.selectedId] != null)
 
-const moveUp = () => {
+const moveUp = async () => {
   const newModel = [...props.modelValue]
   const movable = newModel.splice(props.selectedId, 1)[0]
   newModel.splice(props.selectedId - 1, 0, movable)
 
   emit('update:modelValue', newModel)
+  await nextTick()
   emit('update:selectedId', props.selectedId - 1)
 }
 
@@ -73,27 +92,30 @@ const moveDnValid = computed(() => {
   return props.selectedId < props.modelValue.length - 1
 })
 
-const moveDn = () => {
+const moveDn = async () => {
   const newModel = [...props.modelValue]
   const movable = newModel.splice(props.selectedId.value, 1)[0]
   newModel.splice(props.selectedId + 1, 0, movable)
 
   emit('update:modelValue', newModel)
+  await nextTick()
   emit('update:selectedId', props.selectedId + 1)
 }
 
-const add = () => {
+const add = async () => {
   const newModel = [...props.modelValue, props.getAddValue()]
 
   emit('update:modelValue', newModel)
+  await nextTick()
   emit('update:selectedId', Math.max(newModel.length - 1, 0))
 }
 
-const del = () => {
+const del = async () => {
   const newModel = [...props.modelValue]
   newModel.splice(props.selectedId, 1)
 
   emit('update:modelValue', newModel)
+  await nextTick()
   emit('update:selectedId', newModel.length === 0 ? undefined : Math.max(props.selectedId - 1, 0))
 }
 </script>

src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue

@@ -1,7 +1,7 @@
 <script src="./virtual_directives_tab.js"></script>
 
 <template>
-<div class="setting-item list-editor variables-editor">
+  <div class="setting-item list-editor variables-editor">
     <label
       class="list-select-label"
       for="variables-selector"
@@ -79,5 +79,5 @@
         :hide-optional-checkbox="true"
       />
     </div>
-</div>
+  </div>
 </template>