vue: Populate select options dynamically - vue.js

Question

I have vuejs based application with with a form with a drop-down menu. The options in the menu should eventually be populated from a rest call. Right now I use a very hard coded list:
<template>
<ModalForm v-show="visible" #close="visible = false" title="Add location">
<div class="form-outline mb-4">
<select
class="form-control form-control-lg"
placeholder="Organisation"
v-model="formData.organisation"
>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="text-center mt-5">
<button class="btn btn-lg btn-primary">
Add location
</button>
</div>
</ModalForm>
</template>
<script setup>
import { reactive, ref } from "#vue/reactivity";
import { watch } from "#vue/runtime-core";
import ModalForm from "../../../components/ModalForm.vue";
const visible = ref(false);
const formDataDefaults = {
organisation : "",
};
const formData = reactive({ ...formDataDefaults });
watch(visible, async (newValue) => {
if (newValue == false) {
for (var key in formData) formData[key] = formDataDefaults[key];
}
});
function show() {
visible.value = true;
}
defineExpose({ show });
</script>
and that kind of works - but when I try to populate the select options in a slightly more dynamic way things fail in the build stage. From googling around I have tried this:
<option v-for="org in organisations" :value="org.name" :key="org.id">
...
<script setup>
export default {
data() {
return { organisation: [{name: "Org1", id: 1}, {name: "Org2", id: 2}] };
}
};
</script>
When compiling/running this with npm run serve I get the following error message:
error in ./src/pages/Locations/components/AddLocationModal.vue?vue&type=script&setup=true&lang=js
Syntax Error: TypeError: Cannot read properties of null (reading 'content')
which I do not understand, but I think it is related to the data export in the <script> section. Of course the next step is to actually populate with a rest call - but one step at a time.
Any hints appreciated!
Disclaimer: I am quite new to vue (and anything beyond basic JS), so this is in it's entirety based on CopyPaste and Google.
Update: the error message comes when I only add the
<script setup>
export default {
data() {
return { organisation: [{name: "Org1", id: 1}, {name: "Org2", id: 2}] };
}
};
</script>
part - without making any changes to the <template> part. So it seems there is "something" wrong with the data export. I guess problem is I struggle to understand the model for flow of data/state in this framework.
Update 2: As pointed out in answer below there was a missing { in the original data export section. Fixing that did not solve the problem.
Update 3/solution: As pointed out by several I had a mix of vue2 and vue3 syntax. This example solved it for me.

Answer 1

<script setup> is only for use in Vue 3 projects using the Composition API. Your current code within <script setup> however is written using the Options API. You can either:
Refactor your code to use the Composition API using script setup,
Remove the keyword setup from <script setup> to stick with your current code which should then work using the Options API. Vue 2 projects must use the Options API.

Answer 2

In the example code you have a syntax error, you're missing a brace:
data() {
˅
return { organisation: [{name: "Org1", id: 1}, {name: "Org2", id: 2}] };
˄
}
Check the official documentation about SELECT or the dynamic example