【Vue.js】created読み込み時にHTML内のidを取得できない

前提・実現したいこと

Vue.jsを使っているのですが、created内で呼び出したメソッド内で行なっている
getElementByIdにてHTML内のidが取得できません。

初期表示の段階でaxiosを使ってHTTP通信を行いサーバーと通信し、
そこで得られた結果を元に要素の表示非表示を決定させたいです。

まだまだニワカのため基本的なところで詰まってしまっているようでしたら申し訳ない限りですが、
解決策をご教示頂けますと幸いです。
よろしくお願いいたします。

発生している問題・エラーメッセージ

実行すると、「hidden_area_show()呼び出します」「hidden_area表示します」まではログで表示されるのですが、
「hidden_area表示しました」というログが表示されていません。
また、下記メッセージが表示されています。

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

[WDS] Hot Module Replacement enabled.

該当のソースコード

Vue.js
1<template>
2:
3<div id="hideen_area"></div>
4:
5</template>
6
7<script>
8const created = function() {
9  axios
10    .get(
11      ~~~~~~~
12    )
13    .then(response => {
14      if (response.data.success) {
15        console.log("hidden_area_show()呼び出します")
16        this.hidden_area_show()
17      }
18    })
19}
20
21const methods = {
22  hidden_area_show: function() {
23    console.log("hidden_area表示します")
24    document.getElementById('hideen_area').style.display = "block"
25    console.log("hidden_area表示しました")
26  }
27}
28
29export default {
30  created,
31  data,
32  methods
33}
34</script>
35
36<style>
37#hideen_area {
38  display: none;
39}
40</style>

試したこと

ログに表示されているメッセージを参考にvue-devtoolsをダウンロードして対象プロジェクトのディレクトリに配置しましたが、解決しませんでした。
調べてみるとライフサイクルというものが影響しているのかと思い、created内の記載をmountedを新たに定義してその中に移行しましたが、同じ状態でした。
created内に直接getElementByIdの部分を記述しましたが、「hidden_area_show()呼び出します」というログで止まり、同じメッセージが表示されました。（getElementByIdが原因で処理が中断されているのか、それ以降のログは表示されていません）