Как добавить переменную ACF в JS (Vue) код?

Есть несколько полей, созданных в ACF, которые нужно добавить в данный JS код. Как это можно реализовать? Пробовал ACF JS API (https://www.advancedcustomfields.com/resources/javascript-api/)), но не заводится.

function Top10() {
    return [
        {
            name: "<?php echo the_field('name'); ?>",
            artist: "...",
            cover: "https://site.com/img/1.jpg",
            source: "https://site.com/mp3/1.mp3",
            url: "https://www.youtube.com/",
            favorited: false
        },
        {
            name: "<?php echo the_field('name'); ?>",
            artist: "...",
            cover: "https://site.com/img/1.jpg",
            source: "https://site.com/mp3/1.mp3",
            url: "https://www.youtube.com/",
            favorited: false
        },
        {
            name: "<?php echo the_field('name'); ?>",
            artist: "...",
            cover: "https://site.com/img/1.jpg",
            source: "https://site.com/mp3/1.mp3",
            url: "https://www.youtube.com/",
            favorited: false
        }
    ];
}

На странице вызывается так:

<player :tracks="top10" />
<script type="text/javascript">
        new Vue({
            el: '#Playlist_Top10',
            data: function() {
                return {
                    top10: Top10()
                };
            },
            template: '<player-app :top10="top10"/>',
            components: {
                'player-app': PlayerAppComponent_Top10(PlayerComponent()),
            }
        });
</script>