Starting data for a Vue application - how to arrange?

Question

JavaScript

There is an ID that can be added to the HTML code at the time of rendering by the framework.
You want to pass this ID to an application written in Vue.
1. As an example, this can be done through an attribute.

<div 
    id="app" 
    test-id="<?php echo $test->id ?>">
</div>

And then count at the entry point

beforeMount: function () {
        this.testId = this.$el.attributes['test-id'].value;
    },

2. You can make a binding - we don’t pass anything to the #id attributes, we create an auxiliary component and pass it to the attribute, we read it through props.
Both the first and second look like crutches. How to implement correctly?