fixed scoped style interpretation

src/Scope.vue

@@ -4,8 +4,29 @@
   </svg>
 </template>
 
-<script>
+<style scoped>
+  .scope {
+    fill: red;
+    fill-opacity: 0.1;
+    stroke: red;
+    stroke-width: 2px;
+  }
 
+  svg.thumbViewClass {
+    border: 1px solid black;
+    position: absolute;
+    bottom: 5px;
+    left: 5px;
+    width: 20%;
+    height: 30%;
+    margin: 3px;
+    padding: 3px;
+    overflow: hidden;
+    z-index: 120;
+  }
+</style>
+
+<script>
   function updateScope(){
     let main = this.mainSPZ;
     let thumb = this.thumbnailSPZ;
@@ -67,35 +88,11 @@ export default {
     },
     mounted() {
       const up = updateScope.bind(this);
-        [ 'mainZoom', 'mainPan', 'thumbnailCreated' ].forEach( event => this.bus.$on( event, up )
-        );
+      [ 'mainZoom', 'mainPan', 'thumbnailCreated' ].forEach( event => this.bus.$on( event, up ) );
       up();
     },
     methods: {
       updateMainViewPan
     }
   };
-
 </script>
-
-<style scoped>
-    .scope {
-        fill: red;
-        fill-opacity: 0.1;
-        stroke: red;
-        stroke-width: 2px;
-    }
-
-    svg.thumbViewClass {
-        border: 1px solid black;
-        position: absolute;
-        bottom: 5px;
-        left: 5px;
-        width: 20%;
-        height: 30%;
-        margin: 3px;
-        padding: 3px;
-        overflow: hidden;
-        z-index: 120;
-      }
-</style>