vue.js - Vue component return value

Question

I'm new to VUE and am trying to clean up my code by creating components instead of repeating code.

How do you return a varform a child component?

Main.vue

<template>
     <square value="5" @click="result"></square>
</template>

Square.vue

[...]
mounted() {
     return { fromSquare: value*value } 
}

Main.vue

methods: {
   result(fromSquare) {
       this.squaredResult = fromSquare;
   }

}

Answer 1

You've to emit an event from square component with value*value as payload and add its handler in parent :

mounted() {
    this.$emit("emit-result",value*value)
}

Main.vue

<template>
     <square value="5" @click="result" @emit-result="result"></square>
</template>

....

methods: {
   result(fromSquare) {
       this.squaredResult = fromSquare;
   }

}