如何从下拉列表的数据库中动态绑定标题？

<template>
  <div>
    <select v-model="selectedTitle">
      <option v-for="title in titles" :key="title.id">{{ title.name }}</option>
    </select>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      titles: [],
      selectedTitle: '',
    };
  },
  mounted() {
    this.getTitles();
  },
  methods: {
    getTitles() {
      axios.get('/api/titles')  // 后端接口地址
        .then(response => {
          this.titles = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
};
</script>