How to properly use Laravel localization language-string as vue.js script data property

Question

I have a sweetalert inside a vue.js script (vue.js component script 2 snippet) which is working properly with two Laravel localization language-strings. Now I'm trying to use the same language strings as data properties inside another vue.js component script.

Problem: It don´t accept the following sides.name properties.

vue.js component script 1 snippet

<script>
  data: () => ({ 
            sides: [
                {
                    id: 1,
                    name: this.__('offers.front'),
                },
                {
                    id: 2,
                    name: this.__('offers.back'),
                }
            ],
    }),
</script>

The console displays the following error message:

app.js:247950 [Vue warn]: Error in data(): "TypeError: Cannot read properties of undefined (reading '__')"

Here is the snippet of the sweetalert2 Swal which is working properly:

vue.js component script 2 snippet

<script>
                Swal.fire(
                    this.__('offers.front'),
                    this.__('offers.back'),
                    'success'
                )
</script>

I tried it with without "this" but then the output in the template obviously becomes "offers.front".

Answer 1

    <script>
  data: () => ({ // WITHOUT CONTEXT
            sides: [
                {
                    id: 1,
                    name: this.__('offers.front'), // THIS ERROR
                },
                {
                    id: 2,
                    name: this.__('offers.back'),
                }
            ],
    }),
</script>

Please update for

<script>
  data() {
    return { 
            sides: [
                {
                    id: 1,
                    name: this.__('offers.front'),
                }
            ]
    }
  }
</script>