Porting the Calculator App that I have created.

poke-app/src/components/calculatorComp.vue

+<template>
+  <div class="container">
+    <h1>Calculator with VueJs</h1>
+
+    <div class="calculator">
+      <div id="screen">{{current || 0 }}</div>
+      <table>
+        <tr>
+          <td @click="restResult"><button class="btn">C</button></td>
+          <td v-for="op in operatorsSet" @click="setModifier(op)"><button class="btn">{{op}}</button></td>
+        </tr>
+        <tr>
+          <td v-for="no1 in operatorPlusKey1" @click="setModifier(no1)"><button class="btn">{{no1}}</button></td>
+        </tr>
+        <tr>
+          <td v-for="no2 in operatorPlusKey2" @click="setModifier(no2)"><button class="btn">{{no2}}</button></td>
+        </tr>
+        <tr>
+          <td v-for="no3 in operatorPlusKey3" @click="setModifier(no3)"><button class="btn">{{no3}}</button></td>
+        </tr>
+        <tr>
+          <td v-for="no4 in operatorPlusKey4" @click="setModifier(no4)"><button class="btn">{{no4}}</button></td>
+          <td @click="showResult"><button class="btn">=</button></td>
+        </tr>
+
+      </table>
+    </div>
+  </div>
+
+</template>
+<script>
+export default{
+  data() {
+    return {
+      current : '',
+      operatorsSet : ["(" , ")", "%"],
+      operatorPlusKey1:[7,8,9,"*"],
+      operatorPlusKey2:[4,5,6,"-"],
+      operatorPlusKey3:[1,2,3,"+"],
+      operatorPlusKey4:[0,".","/"],
+      numberkeys : [7,8,9,4,5,6,1,2,3,0,"."],
+      operators1 : ["+/-" , "%", "÷"],
+    };
+  },
+  methods: {
+    setModifier(x){
+      this.current += x
+    },
+    showResult() {
+      this.current = eval(this.current)
+      // Logic here has a lot of room for improvements
+    },
+    restResult(){
+      this.current = "";
+    }
+  },
+}
+</script>
+
+
+<style>
+.calculator{
+  border: 1px solid black;
+}
+.container {
+  text-align: center;
+  margin-top: 23px;
+}
+
+table {
+  margin: auto;
+}
+
+#screen {
+  border-radius: 21px;
+  border: 5px solid #244624;
+  font-size: 34px;
+  height: 65px;
+  width: 456px;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  background-color: white;
+}
+
+.btn {
+  border-radius: 20px;
+  font-size: 40px;
+  background: #d6cbd3;
+  width: 102px;
+  height: 65px;
+  margin: 6px;
+}
+
+.calculator {
+  border: 4px solid #13695d;
+  background-color: #eca1a6;
+  padding: 23px;
+  border-radius: 53px;
+  display: inline-block;
+}
+
+h1 {
+  font-size: 28px;
+  font-family: "Courier New", Courier, monospace;
+}
+</style>
\ No newline at end of file

poke-app/src/pages/Calculator.vue

+<script>
+import calcTag from '../components/calculatorComp.vue'
+
+export default {
+  name:'CalcPage',
+  components:{
+    calcTag,
+  }
+
+}
+</script>
+
+<template>
+  <h1>Calculator Page</h1>
+  <calcTag/>
+</template>
\ No newline at end of file