Question #203

Author: admin
tags: Vue  
some.js:
import { ref } from 'vue';

export const planet = ref('Mars');
SomeComponent1.vue:
<template>
  <div>
    SomeComponent1: {{ planet }}<br>
  </div>
</template>

<script setup>
import { planet } from './some.js';

planet.value = 'Earth';
</script>
SomeComponent2.vue:
<template>
  <div>
    SomeComponent2: {{ planet }}<br>
  </div>
</template>

<script setup>
import { planet } from './some.js';
</script>
Both components are added to app:
    <SomeComponent1 />
    <SomeComponent2 />
What will be rendered in browser?
SomeComponent1: Mars
SomeComponent2: Earth
SomeComponent1: Earth
SomeComponent2: Earth
SomeComponent1: Earth
SomeComponent2: Mars
SomeComponent1: Mars
SomeComponent2: Mars
Rate the difficulty of the question:
easyhard