vue2 "process" is not defined even I can refer it from main.js

Question

Step

1. make a new Vue2 project as vue create test1 and following settings.

2. add .env file on the very top directory with the following.

VUE_APP_test='hello'

3. refer process.env.VUE_APP_test from App.vue then I've got warning as vue.runtime.esm.js?2b0e:4603 [Vue warn]: Property or method "process" is not defined on the instance but referenced during render.

<template>
  <div id="app">
    {{process.env.VUE_APP_test}}
    <!--{{$TEST}}-->
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

4. But, I can use process.env.VUE_APP_test on the main.js as follow and I can refer it as follows.

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
Vue.prototype.$TEST=process.env.VUE_APP_test

new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
  <div id="app">
    <!--{{process.env.VUE_APP_test}}-->
    {{$TEST}}
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

Question

Why I can't refer process.env from App.vue even I can refer it from main.js? How can I fix it to be able to use process.env even from App.vue? Thank you.