refactor: make all provided styleable's a computed

closes #178

BREAKING CHANGE:
If you may have used `inject("stylable")` to access the style for `ol-interaction-draw` or `ol-interaction-modify`, you will now receive a `computed` instead of the direct value.
You can access the value by using `.value`.

**BEFORE**:
```vue
const drawStyleable = inject("stylable")
```

**AFTER**:
```vue
const drawStyleable = inject("stylable").value
```

Author: d-koppenhagen

src/components/interaction/DrawInteraction.vue

@@ -10,10 +10,11 @@ import {
   onMounted,
   onUnmounted,
   toRefs,
-  //computed
+  computed,
 } from "vue";
 
 import Draw from "ol/interaction/Draw";
+import { Style } from "ol/style";
 //import Style from 'ol/style/Style';
 
 export default {
@@ -40,8 +41,8 @@ export default {
       wrapX,
     } = toRefs(props);
 
-    const createDraw = () => {
-      const draw = new Draw({
+    const draw = computed(() => {
+      const d = new Draw({
         source: source.value,
         type: type.value,
         clickTolerance: clickTolerance.value,
@@ -59,18 +60,16 @@ export default {
         wrapX: wrapX.value,
       });
 
-      draw.on("drawstart", (event) => {
+      d.on("drawstart", (event) => {
         emit("drawstart", event);
       });
 
-      draw.on("drawend", (event) => {
+      d.on("drawend", (event) => {
         emit("drawend", event);
       });
 
-      return draw;
-    };
-
-    let draw = createDraw();
+      return d;
+    });
 
     watch(
       [
@@ -90,21 +89,20 @@ export default {
         wrapX,
       ],
       () => {
-        map.removeInteraction(draw);
-        draw = createDraw();
-        map.addInteraction(draw);
-        draw.changed();
+        map.removeInteraction(draw.value);
+        map.addInteraction(draw.value);
+        draw.value.changed();
 
         map.changed();
       }
     );
 
     onMounted(() => {
-      map.addInteraction(draw);
+      map.addInteraction(draw.value);
     });
 
     onUnmounted(() => {
-      map.removeInteraction(draw);
+      map.removeInteraction(draw.value);
     });
 
     provide("stylable", draw);

src/components/interaction/ModifyInteraction.vue

@@ -10,11 +10,12 @@ import {
   onMounted,
   onUnmounted,
   toRefs,
-  // computed
+  computed,
 } from "vue";
 
 import Collection from "ol/Collection";
 import Modify from "ol/interaction/Modify";
+import { Style } from "ol/style";
 //import Style from 'ol/style/Style';
 //import usePropsAsObjectProperties from '@/composables/usePropsAsObjectProperties'
 
@@ -35,8 +36,8 @@ export default {
       hitDetection,
     } = toRefs(props);
 
-    const createModify = () => {
-      const modify = new Modify({
+    const modify = computed(() => {
+      const m = new Modify({
         source: source.value,
         features: features.value,
         condition: condition.value,
@@ -47,18 +48,16 @@ export default {
         hitDetection: hitDetection.value,
       });
 
-      modify.on("modifystart", (event) => {
+      m.on("modifystart", (event) => {
         emit("modifystart", event);
       });
 
-      modify.on("modifyend", (event) => {
+      m.on("modifyend", (event) => {
         emit("modifyend", event);
       });
 
-      return modify;
-    };
-
-    let modify = createModify();
+      return m;
+    });
 
     watch(
       [
@@ -70,21 +69,20 @@ export default {
         hitDetection,
       ],
       () => {
-        map.removeInteraction(modify);
-        modify = createModify();
-        map.addInteraction(modify);
-        modify.changed();
+        map.removeInteraction(modify.value);
+        map.addInteraction(modify.value);
+        modify.value.changed();
 
         map.changed();
       }
     );
 
     onMounted(() => {
-      map.addInteraction(modify);
+      map.addInteraction(modify.value);
     });
 
     onUnmounted(() => {
-      map.removeInteraction(modify);
+      map.removeInteraction(modify.value);
     });
 
     provide("stylable", modify);

src/components/styles/Style.vue

@@ -22,8 +22,12 @@ export default {
     const style = computed(() => new Style(properties));
 
     const setStyle = (val) => {
-      if (styledObj instanceof Draw || styledObj instanceof Modify) {
-        styledObj.getOverlay().setStyle(val);
+      if (
+        styledObj.value instanceof Draw ||
+        styledObj.value instanceof Modify
+      ) {
+        styledObj.value.getOverlay().setStyle(val);
+        styledObj.value.changed();
         styledObj.value.dispatchEvent("styleChanged");
         return;
       }