Laravel+Vuejs: v-model not connecting to app.js

Code in app.js

const app = new Vue({
    el: '#app',
    router,
    data:{
        banana:''
    }
});

Code in master.blade.php

<div class="wrapper" id="app">
    <router-view></router-view> //from Vue router to display Banana.vue
</div>

Code in Banana.vue

<input type="search" name="table_search" class="form-control float-right" placeholder="Search" v-model="banana">

Error Message:

app.js:70634 [Vue warn]: Property or method "banana" 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.

How can the banana in app.js be accessible to Banana.vue? Thank you.