Add some boilerplate

package.json

@@ -17,6 +17,7 @@
   ],
   "dependencies": {
     "core-js": "^3.6.5",
+    "moment": "^2.28.0",
     "vue": "^2.6.11"
   },
   "devDependencies": {
@@ -48,8 +49,7 @@
   "license": "MIT",
   "lint-staged": {
     "*.{js,vue}": [
-      "vue-cli-service lint",
-      "git add"
+      "vue-cli-service lint"
     ]
   },
   "repository": {

src/App.vue

@@ -1,14 +1,13 @@
 <template>
   <div id="app">
-    <p v-if="countdown">The content will disapear in: {{ this.countdown }} secs</p>
-    <p v-else>The content is hidden</p>
     <timed-content :from="from" :to="to" time-zone="America/Santo_Domingo">
       <p>Some secret content</p>
     </timed-content>
   </div>
 </template>
 
 <script>
+import moment from "moment";
 import TimedContent from "./components/TimedContent.vue";
 export default {
   name: "app",
@@ -17,19 +16,9 @@ export default {
   },
   data() {
     return {
-      from: new Date(),
-      to: new Date(),
-      countdown: 5
+      from: moment().add("seconds", 5).toDate(),
+      to: moment().add("seconds", 10).toDate()
     };
-  },
-  created() {
-    this.to.setSeconds(this.to.getSeconds() + this.countdown);
-    const interval = setInterval(() => {
-      this.countdown--;
-      if (!this.countdown) {
-        clearInterval(interval);
-      }
-    }, 1000);
   }
 };
 </script>