diff --git a/ui/src/main.ts b/ui/src/main.ts
index e9e9bd6..cd95432 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -18,10 +18,22 @@ app.directive("sl-model", {
                 | undefined;
             const value = slElement?.value;
             if (value && binding.instance) {
-                (binding.instance.$data as { [key: string]: unknown })[binding.arg as string] = value;
+                if (Object.hasOwnProperty.bind(binding.instance)(binding.arg!)) {
+                    (binding.instance as any)[binding.arg!] = value;
+                } else {
+                    const data = (binding.instance.$data as { [key: string]: unknown });
+                    if (data.hasOwnProperty(binding.arg!)) {
+                        data[binding.arg!] = value;
+                    } else {
+                        console.error(`No property "${binding.arg}" exists on instance.`)
+                    }
+                }
             }
         });
     },
+    mounted: (element: SlInput, binding: DirectiveBinding<string>) => {
+        element.value = (binding.instance as any)[binding.arg!];
+    },
     updated: (element: Element, binding: DirectiveBinding<string>) => {
         const slElement = element as typeof SlInput.prototype | undefined;
         if (slElement) {