Error with reactive properties and routes in Vue.js

I am developing a Vue application with routes but when I access the values of the instance Vue from the templates of the router in an input using v-model , when I try to write something in the input it throws me these two errors

  

[Vue warn]: Can not set reactive property on undefined, null, or primitive value: undefined

     

TypeError: right-hand side of 'in' should be an object, got undefined

Then I have a button that executes a method that sends the input data but when I press it, the following appears in the console

  

[Vue warn]: Property or method "saveBook" 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: link .   found in   --- >    <Anonymous> <Root>

I checked the link that shows is second warn but I can not understand what to do with $nextTick .

Edit: In this event problem submit I tried with @submit.prevent="this.$root.saveBook()" but mark that this.$root.saveBook() is undefined then I tried with :@submit.prevent="this.$root.saveBook()" and alternately with v-bind:@submit.prevent="this.$root.saveBook()" when doing that the function is executed without stopping how if it were a loop or the event submit will be activated many times

How can I solve these warn ? What is the correct way to link inputs from the router and the instance? Why is not the method executed?

This is my code:

Router:

Vue.use(VueRouter);
const Questionnaire = { template: '
    <div>
        <form @submit.prevent="saveBook()">

                <input v-model="this.$root.titleBook" id="titleBook" type="text" maxlength="200" required>

                <input v-model="this.$root.idUrlBook" id="idUrlBook" type="text maxlength="100" required>

            <button type="submit">
                Enviar
            </button>
        </form>
    </div>

' };

const router = new VueRouter({
    routes: [
        { path: '/questionnaire', component: Questionnaire },
    ]
});

Instance

new Vue({
    router,
    el: "#app",
    data:{ 
        // datos de formulario para crear cuestionarios
        titleBook:'',
        idUrlBook:'',
        //
        bookData
    },
    methods : {

        saveBook: function () {
            var vm = this;


                axios.post('php/bookQuery/book.php',this.createdFormData(
                    {
                        typeReq:1,
                        titleBook:this.titleBook,
                        idUrlBook:this.idUrlBook,
                    }
                ))
                .then(function (response) {
                    console.log(response);
                    if (response.data.state == true ){
                        M.toast({html: response.data.msg});
                        vm.getBook();

                    } else {

                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        getBook: function () {
            var vm = this;
            axios.post('php/bookQuery/book.php',this.createdFormData(
                {
                    typeReq:2,
                }
            ))
            .then(function (response) {
                console.log(response.data);
                if (response.data.state == true ){
                    vm.bookData = response.data.bookData;
                } else {

                }
            })
            .catch(function (error) {
                console.log(error);
            });
        }
    },
    mounted(){
        this.getBook();
    }
})