[O] Use non-destructive method of setting event listeners

src/views/color/ColorPicker.vue

@@ -67,14 +67,16 @@ export default class MyColorPicker extends Vue
         const el = this.$refs.window as HTMLElement
         let lastX = e.clientX, lastY = e.clientY
 
-        document.onmouseup = () => {document.onmousemove = null; document.onmouseup = null}
+        const mousemove = (e: MouseEvent) =>
-        document.onmousemove = (e) =>
         {
             const dx = lastX - e.clientX, dy = lastY - e.clientY
             lastX = e.clientX; lastY = e.clientY
             el.style.left = (el.offsetLeft - dx) + 'px'
             el.style.top = (el.offsetTop - dy) + 'px'
         }
+        const mouseup = () => {document.removeEventListener('mouseup', mouseup); document.removeEventListener('mousemove', mousemove)}
+        document.addEventListener('mouseup', mouseup)
+        document.addEventListener('mousemove', mousemove)
     }
 
     @Emit('updatePalette')

src/views/color/ColorPickerTest.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="Projects">
-        <ColorPicker v-model:color="color"></ColorPicker>
+        <MyColorPicker v-model:color="color"></MyColorPicker>
         <button @click="log"></button>
     </div>
 </template>
@@ -10,10 +10,10 @@ import {Options, Vue} from 'vue-class-component';
 import MyColorPicker from "@/views/color/ColorPicker.vue";
 import {Color} from "three";
 
-@Options({components: {ColorPicker: MyColorPicker}})
+@Options({components: {MyColorPicker}})
 export default class Projects extends Vue
 {
-    color = new Color('#ffffff')
+    color = '#ffffff'
 
     log(): void
     {