Why does non-reactive variable behave strange in Vue3?

Here is the code

<template>
  <input type="button" value="click" @click="clickBtn"/>
  <div id="reactiveDiv">{{ reactiveVariable }}</div>
  <div id="noneReactiveDiv">{{ noneReactiveVariable }}</div>
</template>

<script setup lang="ts">
import { ref, nextTick } from "vue"

const reactiveVariable = ref('reactive')

let noneReactiveVariable = 'non reactive '

function clickBtn(){
  reactiveVariable.value = (new Date().getTime()).toString()
  noneReactiveVariable = (new Date().getTime()).toString()

  nextTick(()=>{
    console.log('next tick')
  })
}

</script>

I have two variables: reactiveVariable is reactive and noneReactiveVariable is not.

My question is:

1. When I click the button, both variables in template change. I think noneReactiveVariable should not be changed because it’s defined without ref or reactive key words. My guess is that the reactive variable reactiveVariable’s value change caused the template to update and caused the noneReactiveVariable in template change too. I don’t know for sure.

2. if I change the template like this:

<template>
  <input type="button" value="click" @click="clickBtn"/>
  <div id="noneReactiveDiv">{{ noneReactiveVariable }}</div>
</template>

In this case, when I click the button, the noneReactiveVariable in template doesn’t change. It seems ok now. But I have a nextTick in function clickBtn, I can see the log in console when I click the button which means the UI or template has updated. I think if the template has updated, why doesn’t the noneReactiveVariable in template change just like before, the reactiveVariable change caused the noneReactiveVariable change?