[Vuejs]-Display passed image in template, in VUE

    <template>
      <div id="search-wrapper">
        <div>
          <input style="width:500px;"
            id="search_input"
            ref="autocomplete"
            placeholder="Search"
            class="search-location"
            onfocus="value = ''"
            v-on:keyup.enter="displayPic"
            @onclick="displayPic"
          >
          <img style="width:500px;;margin:5%;" :src="pic" >
        </div>
      </div>
    </template>

<script>
import VueGoogleAutocomplete from "vue-google-autocomplete";

export default {
  data: function() {
    return {
      search_input: {},
      pic:""
    };
  },

  mounted() {
    this.autocomplete = new google.maps.places.Autocomplete(
      this.$refs.autocomplete,
      {componentRestrictions: {country: "us"}}
    );

  },

  methods: {
    displayPic: function(){
      this.autocomplete.addListener("place_changed", () => {
      let place = this.autocomplete.getPlace();
      if (place.photos) {
          place.photos.forEach(photo => {
            this.pic=place.photos[0].getUrl()
          });
        }
    })
  },
  }
}
</script>