2 files changed, 16 insertions, 12 deletions
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 2d5d6eb1..a1d1012b 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -30,18 +30,19 @@ const toModel = (object = {}) => ({
 })
 
 export default {
-  // 'Value' and 'Fallback' can be undefined, but if they are
+  // 'modelValue' and 'Fallback' can be undefined, but if they are
   // initially vue won't detect it when they become something else
   // therefore i'm using "ready" which should be passed as true when
   // data becomes available
   props: [
-    'value', 'fallback', 'ready'
+    'modelValue', 'fallback', 'ready'
   ],
+  emits: ['update:modelValue'],
   data () {
     return {
       selectedId: 0,
       // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
-      cValue: (this.value || this.fallback || []).map(toModel)
+      cValue: (this.modelValue || this.fallback || []).map(toModel)
     }
   },
   components: {
@@ -70,7 +71,7 @@ export default {
     }
   },
   beforeUpdate () {
-    this.cValue = this.value || this.fallback
+    this.cValue = this.modelValue || this.fallback
   },
   computed: {
     anyShadows () {
@@ -105,15 +106,17 @@ export default {
         !this.usingFallback
     },
     usingFallback () {
-      return typeof this.value === 'undefined'
+      return typeof this.modelValue === 'undefined'
     },
     rgb () {
       return hex2rgb(this.selected.color)
     },
     style () {
-      return this.ready ? {
-        boxShadow: getCssShadow(this.fallback)
-      } : {}
+      return this.ready
+        ? {
+            boxShadow: getCssShadow(this.fallback)
+          }
+        : {}
     }
   }
 }
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 511e07f3..669cac71 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -204,17 +204,18 @@
         v-model="selected.alpha"
         :disabled="!present"
       />
-      <i18n
-        path="settings.style.shadows.hintV3"
+      <i18n-t
+        scope="global"
+        keypath="settings.style.shadows.hintV3"
         tag="p"
       >
         <code>--variable,mod</code>
-      </i18n>
+      </i18n-t>
     </div>
   </div>
 </template>
 
-<script src="./shadow_control.js" ></script>
+<script src="./shadow_control.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';