VueJS ReferenceError: bookz is not defined

I have a problem that when I assign a variable in the correct way in .js file with Vue js format and in the html file when I try to use it I get ReferenceError: bookz is not defined. Before I have written the exact same thing as in <script> tags, it was working. But now with this new variable it cannot run. In addition, when I use the old variable with different data it still shows the previous data.

VueJS part

const app = new Vue({
 data: {
    bookz: [
            {id:1 , title: "AAAA"},
            {id:2 , title: "BBBB"},
            {id:3 , title: "CCCC"},
           ],
       }
}

HTML part

<select @change="onChange($event)" class="form-select form-control" v-model="bookz.title">
   <option>---Select a book---</option>
   <option v-for="b in bookz" v-bind:value="b.id">${b.title}}</option>
</select>   

I am trying to get a select with options from data in the vuejs part.

I found what my mistake was. I simply forgot the to bind the Vuejs code with the HTML part, I added a div with class name of the el CSS selector in my Vue code and now it is working functionally. ( added the name in el:"#app" in Vue component into div class)

<div class="app">
      <select @change="onChange($event)" class="form-select form-control" v-model="bookz.title">
          <option>---Select a book---</option>
          <option v-for="b in bookz" v-bind:value="b.id">${b.title}}</option>
      </select>                                   
    </div>