修改组件id冲突bug

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsw-ruler",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "main": "dist/dsw-ruler.umd.min.js",
   "private": false,
   "jsx": "preserve",

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <DswRuler class="horizontal" :minNum="-107" :maxNum="num" @move="callback" @click="callback"></DswRuler>
-    <!-- <DswRuler class="vertical" :orientation="1" :minNum="-107" :maxNum="150"></DswRuler> -->
+    <DswRuler class="vertical" :orientation="1" :minNum="-107" :maxNum="150"></DswRuler>
     <div class="btn">
       <button @click="sub">-</button>
       <button @click="add">+</button>

src/components/dsw-ruler/index.vue

@@ -1,7 +1,6 @@
 <template>
 <div>
   <canvas
-    id="ruler"
     ref="ruler"
     :style="{'width': '100%', 'height': '100%', 'position': 'relative'}"
     ></canvas>
@@ -51,14 +50,14 @@ export default {
     }
   },
   mounted() {
-    let canvas = document.getElementById('ruler');
+    let canvas = this.$refs.ruler;
     canvas.addEventListener('mousemove', this.dottedLineMove, true)
     canvas.addEventListener('click', this.dottedLineClick, true)
     this.init();
   },
   methods: {
     init() {
-      let canvas = document.getElementById('ruler');
+      let canvas = this.$refs.ruler;
 
       if (this.orientation) {
         this.windowWidth = canvas.getBoundingClientRect().height;
@@ -77,14 +76,14 @@ export default {
 
     },
     clearGrid() {
-      let canvas = document.getElementById('ruler');
+      let canvas = this.$refs.ruler;
       let w = canvas.getBoundingClientRect().width;
       let h = canvas.getBoundingClientRect().height;
       let ctx = canvas.getContext("2d");
       ctx.clearRect(0, 0, w, h);
     },
     drawGrid() {
-      let canvas = document.getElementById('ruler');
+      let canvas = this.$refs.ruler;
       if (!canvas.getContext) return;
 
       // 方向判定
@@ -184,7 +183,7 @@ export default {
       this.$emit('click', position)
     },
     resize() {
-      let canvas = document.getElementById('ruler');
+      let canvas = this.$refs.ruler;
 
       if (this.orientation) {
         this.windowWidth = canvas.getBoundingClientRect().height;