Vue | Call method function inside of data - vue.js

Question

Stack.
The problem | Codepen
I have this code in Vue:
<input v-model="name" type="text"/>
<span>{{ slug }}</span>
And this data:
data: {
name: ''
}
This is methods:
computed: {
slug: function() {
return this.slugify(this.name);
}
slugify: function(name) {
var slug = name.toLowerCase();
slug = slug.replace(/\s*$/g, '');
slug = slug.replace(/\s+/g, '-');
return slug;
}
How can I use {{ slug }} in input value?
v-bind:value is not working together with v-model as Vue Docs said.
The question
I need to generate slug inside another input?
It will be look like:
<input v-model="name" type="text"/>
<input v-model="slug" type="text"/> <--- Here goes generated input with value = slug

Answer 1

My solution for this would be like this:
new Vue({
el: '#app',
data: {
title: '',
slug: ''
},
methods: {
slugify: function () {
let slugInput = this.title.toLowerCase()
slugInput = slugInput.replace(/\s*$/g, '');
slugInput = slugInput.replace(/\s+/g, '-');
this.slug = slugInput
}
}
});
HTML:
<div id="app">
<input
v-model="title"
type="text"
#input="slugify"/>
<span>{{ title }}</span>
<br>
<input
v-model="slug"
type="text"/>
<span>{{ slug }}</span>
</div>

Answer 2

One way to do this would be to stick with v-model, then modify name in situ with #keypress and #blur, like this...
code
new Vue({
el: '#app',
data: {
title: '',
name:''
},
computed: {
slug: function() {
return this.slugify(this.name);
}
},
methods: {
onkeypress(){
console.log("change");
var slug = this.name.toLowerCase();
slug = slug.replace(/\s+/g, '-');
this.name = slug
},
onblur(){
this.name = slugify(this.name)
},
slugify: function(name) {
var slug = name.toLowerCase();
slug = slug.replace(/\s*$/g, '');
slug = slug.replace(/\s+/g, '-');
return slug;
}
}
});
markup
<div id="app">
<input v-model="name"#keypress="onkeypress" #blur="onblur" type="text"/>
<span>{{ slug }}</span>
</div>