Modify a Component's variable from an imported function

I have a Vue component in which I have defined variables in

export default {
        data() {
           return {
             var1: val1
           }
        }
}

Depending on the value of these variables things are displayed in my component. The content is used for stuff like v-if and also for displaying the actual content.

I use functions to manipulate the contents of those variables (e.g. to pull from an API). For better readability, I would like to keep the functions in a separate file. So I import them like this:

import {reset_state, get_random_entity, get_start_entity } from '../../functions/entity_component_functions.ts';

How can I share my variables defined in the Component to the functions in this file entity_component_functions.ts so they can modify their content and the component reacts upon changes?

I am happy to read in the documentation if you tell me where to look or what is the technical term for what I search for.

UPDATE:

I was pointed to Composables which do look great, but I am not sure how to use them in my case.

In my component, I have a couple of buttons that do different things when clicked. But they - in the end - have to update what is displayed in the component (thus the same variable).

However, in the Composables example with the mouse, the Composable itself is the only one that can update its managed variables and it does so by defining what to do in case of an event.

But I have different functions (see below) that are called depending on which button is clicked. How can they update the Composable's variables (entity_isLoaded, entity_content_data)? They are also defined in functions.ts - but they cannot call load_entity(), right?

component:

<button id="entity-btn-getstarted" @click="get_random_entity(entity_isLoaded, entity_content_data)" class="entity-btn">
    Do something!
</button>
<button id="entity-btn-getstarted2" @click="get_start_entity(entity_isLoaded, entity_content_data, selected_entity_type)" class="entity-btn">
    Get an entity of your selected type!
</button>

functions.ts:

function manage_entitycomponent_data() {
    const entity_isLoaded = ref(false);
    const entity_content_data = ref({"test": "test"}); 

    function load_entity(json) {
        const random_index = get_random_number(json.length);
        entity_content_data.value = json[random_index];
        entity_isLoaded.value = true;
    }

    return {entity_isLoaded, entity_content_data}
}

If you're using Vue3 I think what you're looking for is Composables. This may require a basic knowledge of Composition API but you can use them with Options API.

UPDATE:

You actually can import and change variables from your composable.

First of all your functions.ts must export your function

import { ref } from "vue";

export function manage_entitycomponent_data() {
  const entity_isLoaded = ref(false);
  const entity_content_data = ref({"test": "test"}); 

  function load_entity(json) {
      const random_index = get_random_number(json.length);
      entity_content_data.value = json[random_index];
      entity_isLoaded.value = true;
  }

  return { entity_isLoaded, entity_content_data, load_entity }
}

Just make sure to return every variable and function you need in your .vue component.

A good practice for composables is to call your function with use{WhatYourHandling} in this case we can call it like useEntity

import { ref } from "vue";

export function useEntity() {
  // ...
}

After that you need to import your composable into your .vue component. You're using Options API, so the returned bindings must be called inside setup() to be exposed to this and the template. (From the offical Docs in the link)

<script>
// or <script lang="ts"> if you're using typescript in your project

import { useEntity } from "THE_PATH"

export default {
  setup() {
    const { entity_isLoaded, entity_content_data, load_entity } = useEntity()

    return { entity_isLoaded, entity_content_data, load_entity }
  },
  methods: {
    // ...
  },
  data() {
    return {
      // ...
    }
  },
  // the rest...
}
</script>

After this setup you can use your variables and functions as you like both in template and script like in this example:

<template>
  <div>
    {{ entity_isLoaded }} - {{ entity_content_data }}
    <button @click="isLoaded(true)">Yes it's loaded ✅</button>
    <button @click="isLoaded(false)">No it's not loaded ❌</button>
  </div>
</template>

<script>
import { useEntity } from "@/composables/functions"

export default {
  setup() {
    const { entity_isLoaded, entity_content_data, load_entity } = useEntity()

    return { entity_isLoaded, entity_content_data, load_entity }
  },
  methods: {
    isLoaded(value) {
      this.entity_isLoaded = value
    }
  },
  mounted() {
    this.load_entity({})
  }
}
</script>

In the end you just need to use export in your Composable and call every variable and function using setup() in your Vue component.

Hope I got your question right!