vue.jsでメソッドが2回呼ばれる

下記コードなのですが、結果のログのように"init_map"メソッドが
2回呼ばれてしまいます。
php(blade)側で一度だけ呼んでいるつもりですが、なぜこうなるのか
ご教授頂ければ幸いです。

PHP
1<!doctype html>
2<head>
3<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
4<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
6
7</head>
8
9<body>
10    <div id="app">
11        <div>
12            @{{ init_map(map_data) }}
13        </div>
14        <div>
15            <select v-model="selected">
16                <option value=""></option>
17                <option v-for="(search_title, index) in search_titles" v-bind:value="search_title">
18                    @{{ search_title }}
19                </option>
20            </select>
21        </div>
22        <div v-for="content in contents" :key="contents.id">
23            @{{ content.title }}
24        </div>
25    </div>
26    
27    <script src="js/top.js"></script>
28</body>

javascript
1var app = new Vue({
2    el: '#app',
3    data: {
4        contents: [],
5        search_titles: [],
6        search_title: '',
7        selected: '',
8    },
9
10    mounted () {
11        this.read_data()
12    },
13    methods: {
14        read_data () {
15            console.log('さいしょ');
16            let url = '/api/viewtest'
17            axios
18                .get(url)
19                .then((response) => {
20                    this.contents = response.data.conf.contents
21                    this.search_titles = response.data.conf.search_titles
22                })
23                .catch((error) => {
24                    console.log('えらー');
25                })
26                .finally(() => {
27                    console.log('ふぁいなりー');
28                })
29        },
30
31        init_map (data, key) {
32            console.log('呼ばれた');
33        },
34
35    },
36    watch: {
37        'selected' (val) {
38            console.log(val)
39        }
40    }
41})