perfect ref production

lib/components/borderBox8/src/main.vue

@@ -68,11 +68,12 @@ export default {
   name: 'DvBorderBox8',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'border-box-8',
-      path: `border-box-8-path-${(new Date()).getTime()}`,
+      path: `border-box-8-path-${timestamp}`,
-      gradient: `border-box-8-gradient-${(new Date()).getTime()}`,
+      gradient: `border-box-8-gradient-${timestamp}`,
-      mask: `border-box-8-mask-${(new Date()).getTime()}`
+      mask: `border-box-8-mask-${timestamp}`
     }
   },
   computed: {

lib/components/borderBox9/src/main.vue

@@ -89,11 +89,12 @@ export default {
   name: 'DvBorderBox9',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'border-box-9',
 
-      gradientId: `border-box-9-gradient-${(new Date()).getTime()}`,
+      gradientId: `border-box-9-gradient-${timestamp}`,
-      maskId: `border-box-9-mask-${(new Date()).getTime()}`
+      maskId: `border-box-9-mask-${timestamp}`
     }
   }
 }

lib/components/charts/src/main.vue

@@ -19,9 +19,10 @@ export default {
     }
   },
   data () {
+    const timestamp = Date.now()
     return {
-      ref: `charts-container-${(new Date()).getTime()}`,
+      ref: `charts-container-${timestamp}`,
-      chartRef: `chart-${(new Date()).getTime()}`,
+      chartRef: `chart-${timestamp}`,
 
       chart: null
     }

lib/components/decoration10/src/main.vue

@@ -152,16 +152,17 @@ export default {
   name: 'DvDecoration10',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'decoration-10',
 
-      animationId1: `d10ani1${(new Date()).getTime()}`,
+      animationId1: `d10ani1${timestamp}`,
-      animationId2: `d10ani2${(new Date()).getTime()}`,
+      animationId2: `d10ani2${timestamp}`,
-      animationId3: `d10ani3${(new Date()).getTime()}`,
+      animationId3: `d10ani3${timestamp}`,
-      animationId4: `d10ani4${(new Date()).getTime()}`,
+      animationId4: `d10ani4${timestamp}`,
-      animationId5: `d10ani5${(new Date()).getTime()}`,
+      animationId5: `d10ani5${timestamp}`,
-      animationId6: `d10ani6${(new Date()).getTime()}`,
+      animationId6: `d10ani6${timestamp}`,
-      animationId7: `d10ani7${(new Date()).getTime()}`
+      animationId7: `d10ani7${timestamp}`
     }
   }
 }

lib/components/decoration9/src/main.vue

@@ -90,10 +90,11 @@ export default {
   name: 'DvDecoration9',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'decoration-9',
 
-      polygonId: `decoration-9-polygon-${(new Date()).getTime()}`,
+      polygonId: `decoration-9-polygon-${timestamp}`,
 
       svgWH: [100, 100],
 

lib/components/flylineChart/src/main.vue

@@ -171,13 +171,14 @@ export default {
     }
   },
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'dv-flyline-chart',
       unique: Math.random(),
-      maskId: `flyline-mask-id-${(new Date()).getTime()}`,
+      maskId: `flyline-mask-id-${timestamp}`,
-      maskCircleId: `mask-circle-id-${(new Date()).getTime()}`,
+      maskCircleId: `mask-circle-id-${timestamp}`,
-      gradientId: `gradient-id-${(new Date()).getTime()}`,
+      gradientId: `gradient-id-${timestamp}`,
-      gradient2Id: `gradient2-id-${(new Date()).getTime()}`,
+      gradient2Id: `gradient2-id-${timestamp}`,
 
       defaultConfig: {
         /**

lib/components/percentPond/src/main.vue

@@ -57,9 +57,10 @@ export default {
     }
   },
   data () {
+    const timestamp = Date.now()
     return {
-      gradientId1: `percent-pond-gradientId1-${(new Date()).getTime()}`,
+      gradientId1: `percent-pond-gradientId1-${timestamp}`,
-      gradientId2: `percent-pond-gradientId2-${(new Date()).getTime()}`,
+      gradientId2: `percent-pond-gradientId2-${timestamp}`,
 
       width: 0,
       height: 0,
@@ -239,7 +240,7 @@ export default {
       this.height = dom.clientHeight
     },
     mergeConfig () {
-      let { config, defaultConfig } = this
+      const { config, defaultConfig } = this
 
       this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
     }

lib/components/waterLevelPond/src/main.vue

@@ -53,8 +53,9 @@ export default {
     default: () => ({})
   },
   data () {
+    const timestamp = Date.now()
     return {
-      gradientId: `water-level-pond-${(new Date()).getTime()}`,
+      gradientId: `water-level-pond-${timestamp}`,
 
       defaultConfig: {
         /**