It's the weekend and I need to fill in some hours but I'm stuck on all my tasks. I can't figure out how the backend of the application I'm working on interacts with the front end. So far I have an endpoint that I can access that gives me the data:

@app.route('secure/endpointexample', methods=['GET'])
def get_data_from_backend():
   return jsonify(data_from_backend)

And I have a route that renders a template which is created using rollup Vue plugin.

@app.route('secure/renderexampletemplate', methods=['GET'])
def render_example_template():
   return render_template('example.html', data = get_data_from_Backend())

Finally, I'm trying to use the data in my Vue component like so:

<template>
  <div>
    <div v-for="datum in data" :key="datum.id">
      <p> datum.name </p>
    </div>
  </div>
</template>

I'm getting a message in the console to the effect that it's not finding the property (data).

I've tried using axios and javascript's fetch function but one requires installing a dependency and the other just doesn't work. I'm trying to use another application that my team built as an example and I've searched high and low for how they're accessing the api endpoints but nothing has come up.

Is there a way to access endpoints using pure flask or maybe another way that I'm not aware of?