Property or method not defined on instance

I'm trying to create a watcher to bind the value from an input run it through a method and display that value on the page. Its a fairly straightforward sample of code I'm working with but I believe I have a scoping issue but I don't see anything wrong.

I tried changing a few things such as the convertTitle function scoping. e.g. But I got the same error

convertTitle() {
return Slug(this.title)
}

My Vue Component -

<template>
    <div class="slug-widget">
        <span class="root-url"></span>
        <span class="slug" v-if="slug !== nil"></span>
    </div>
</template>

<script>
    export default {
        props: {
            url: {
                type: String,
                required: true
            },
            title: {
                type: String,
                required: true
            }
        },
        data: function() {
            return {
                slug: this.convertTitle()
            }
        },
        methods: {
            convertTitle: function() {
                return Slug(this.title)
            }
        },
        watch: {
            title: function(val) {
                this.slug = this.convertTitle();
            }
        }
    }
</script>

My Blade Partial with input -

@extends('admin.admin')

@section('content')
<div class="row">
    <div class="col-md-9">
        <div class="row">
            <h1>Create new page</h1>
        </div>
        <div class="row">
            <div class="pcard">
                <form action="" method="POST" class="">
                    

                    <label>Title</label>
                    <input type="text" name="page-title" placeholder="" v-model="title">
                    <slug-widget url="" :title="title"></slug-widget>
                </form>
            </div>          
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    var app = new Vue({
        el: '#app',
        data: {
            title: ''
        }
    });
</script>
@endsection

Full error Trace -

[Vue warn]: Property or method "title" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2I7wiDA
via IFTTT