I don't understand why a div tag would stop being visible once I try to bind it to a v-for directive in my code

Question

The issue is with the div tag with class log, I am trying to populate the text with data gotten from the api response. As I try to include the v-for directive ,the whole div disappears from the browser and there is no single error thrown by the console.

<template>
  <div>
    <div class="log" v-for="info in infos" v-bind:key="info" v-text="info.login">
      Username
    </div>
  </div>
</template>

<script>
  export default {
    name: "HelloWorld",
    data() {
      return {
        name: '',
        infos: null,
      }
    },
    methods: {
      hello() {
        let user = document.querySelector(".search").value;
        let fullname = user.split(" ").join("");
        let msg = "No Username Found";

        const axios = require("axios");
        axios.get("https://api.github.com/users/" + fullname)
          .then(response => (this.infos = response.data))
          .catch(error => alert(error + " " + msg))
      },
      reset() {
        this.name = "";
      }
    }
  };
</script>

Answer 1

infos is null so the div will not show. Below i've added a created function, where I call hello().This will populate infos and show the div.

<script>
  export default {
    name: "HelloWorld",
    data() {
      return {
        name: '',
        infos: null,
      }
    },
    created() {
      hello();
    },
    methods: {
      hello() {
        let user = document.querySelector(".search").value;
        let fullname = user.split(" ").join("");
        let msg = "No Username Found";

        const axios = require("axios");
        axios.get("https://api.github.com/users/" + fullname)
          .then(response => (this.infos = response.data))
          .catch(error => alert(error + " " + msg))
      },
      reset() {
        this.name = "";
      }
    }
  };
</script>

Answer 2

try using computed method

<template>
  <div>
    <div class="log" v-for="info in infosComputed" v-bind:key="info" v-text="info.login">
      Username
    </div>
  </div>
</template>
...
computed {

  infosComputed: function() {
     return this.infos;
  }

}

data is not reactive