v-ifが上手く効かない

Question

困っていること

axiosでリクエストを送ったAPIのresponse結果を、authenticatedというプロパティに代入し、
そのauthenticatedがtrueならrouter-linkを表示するという処理を書きたいのですが、表示がされない形となってしまいます。
ログを確認するとthis.authnticatedには確かにtrueが入っています。
しかし、<span v-if = "this.authenticated == true">この様な記載をしてもなぜか表示されません。
mountedというライフサイクルで記載するのがまずいのか、v-ifの条件式の書き方が良くないのかは分からないですが、どうすればこちらを解決できるか伺いたいです。
ご回答いただけると幸いです。
よろしくお願いします。

該当コード

<template>
  <v-app>
    <span v-if = "this.authenticated == true">
      <router-link :to="{ path: '/page_edit', query: { value: this.userid }}">編集</router-link>
    </span>
    <router-view></router-view>
  </v-app>
</template>

<script>
import axios from 'axios';
export default {
  name: "show",
  data: function() {        
    return{
      userid: "",
      authenticated: null
    }
  },
  computed: {
　　　//省略
  },
  mounted: function() {
    this.user_id =  this.$route.params.id;
    axios
        .get('http://localhost:3000/users/'+ this.user_id, {
　　　　　　　　　　　　　　　　//省略
        })
        .then((response) => {
          this.authenticated = response.data.authenticated;
　　　　　　　　　　　　　　　　　　　　console.log(this.authenticated);
        })
        .catch(error => {
            alert(error);
        })
  },
  methods: {
　　　　　//省略
  }
}
</script>

Answer 1

テンプレートに書くときはthisは不要だと思います。

<span v-if="authenticated == true">

Answer 2

v-bind系（v-ifとか）はthis不要です