incrementing and rendering text with vue.js - vue.js

Question

I am trying to do something pretty simple. Increment a number:
<div>
<button v-on:click="increase">Add 1</button>
<p>{{ sayHello() }} and {{ counter }}</p>
</div>
which will change an event here:
<b-form-input v-bind="renderText(counter)"
type="text"
placeholder="Type Alex"></b-form-input>
where this should just render whatever is in the text box.
<b-form-input v-bind="foo"
type="text"
placeholder="Enter your name"></b-form-input>
<p>Value: {{ foo }} and {{counter}}</p>
full code: but the only this that works in the sayHello() method.
<template>
<div>
<form>
<div>
<button v-on:click="increase">Add 1</button>
<p>{{ sayHello() }} and {{ counter }}</p>
</div>
<div>
<b-form-input v-bind="foo"
type="text"
placeholder="Enter your name"></b-form-input>
<b-form-input v-bind="renderText(counter)"
type="text" placeholder="Type Alex"></b-form-input>
<p>Value: {{ foo }} and {{counter}}</p>
</div>
</form>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'Hobbies',
methods: {
data:{
foo: '',
counter: 0
},
sayHello: function () {
return 'Alex'
},
increase: function () {
this.counter++;
},
renderText: function (event) {
if (event == 5){
return 10
} else{
return 16
}
}
}
});
</script>
<style scoped>
</style>
when putting data outside of methods I get:

Answer 1

You put data inside methods, it should be at the root level, since we're in a component it must also come as a function :
export default {
name: 'Hobbies',
data: function(){
return { foo: '', counter: 0 };
},
methods: {
sayHello: function () { return 'Alex' },
increase: function () { this.counter++; },
renderText: function (event) {
if (event == 5){
return 10
} else{
return 16
}
}
}
}