VueJS template not rendering in Laravel 7

Question

It appears that my js is compiling correctly but for some reason my Vue template is not rendering. I am not seeing that it is mounting in the console either, but no errors.

It was working, then I upgraded to Laravel 8 and had problems with Tailwind compiling. I downgraded to 7 and removed tailwind. CSS and JS seem to be compiling correctly but template still is not rendering.

PetSearch.blade.php

@extends('layouts.services')
<!--@section('title', 'Pet Search') -->

@section('content')

        <div id="results">
          <petfinderapi></petfinderapi>
        </div>

@endsection

resources/assets/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('petfinderapi', require('./components/PetfinderAPI.vue').default);

// Vue.component('vetapi', require('./components/YelpAPI.vue').default);

const app = new Vue({
  el: '#services'
});

PetFinderAPI.vue

<template>
<!-- input form for pet search HEROKU TEST-->
<div id="petSearchInput" class="container-fluid" style="width: auto;">
  <div class="form-group">
    <label for="searchZip">ZipCode</label>
    <input type="text" name="zipCode" value="" class="input-sm" placeholder="Zipcode Required" style="width: auto;" v-model='searchZip' required>

    <label for="animal">Animal Type</label>
    <select name="type" v-model='animalType'>
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="bird">Bird</option>
      <option value="horse">Horse</option>s
      <option value="barnyard">Barnyard</option>
      <option value="reptile">Reptile</option>
      <option value="smallfurry">Small Furry</option>
    </select>

    <label for="age">Age</label>
    <select name="age" v-model='animalAge'>
      <option value=''>Any</option>
      <option value="Baby">Baby</option>
      <option value="Young">Young</option>
      <option value="Adult">Adult</option>
      <option value="Senior">Senior</option>
    </select>

    <!-- todo: add approximate weight to size labels -->
    <label for="size">Size</label>
    <select name="size" v-model='animalSize'>
      <option value=''>Any</option>
      <option value="S">Small</option>
      <option value="M">Medium</option>
      <option value="L">Large</option>
      <option value="XL">Extra Large</option>
    </select>

    <label for="sex">Sex</label>
    <select name="sex" v-model="animalSex">
      <option value=''>Any</option>
      <option value="M">Male</option>
      <option value="F">Female</option>
    </select>
    <div>
      <input class="btn btn-secondary" style="color: white;" type="submit" id="submitZip" @click="getPet(); showBtn();">
      <input class="btn btn-secondary" value="Clear" style="color:white;" type="button" id="reloadForm" @click="reloadForm();">
    </div>
  </div>
  <!-- <div><strong><h4>Page Number {{pageNum}}</h4></strong></div>
    <div><strong><h4>Offset {{lastOffset}}</h4></strong></div>
    <div><strong><h4>Number of items {{ itemCount }} </h4></strong></div>
    <div><strong><h4>Remainder {{ remainder }} </h4></strong></div> -->
  <div id="petDisplay" class="container-fluid d-flex p-1 m-0">
    <div class="row">
      <div id="prev" class="col-md-1" style="display:none;">
        <button type="button" class="btn btn-sm" style="height: 100%;" id="prevBtn" @click="previousPage();">
          <span class="arrow-icon"><i class="fas fa-arrow-circle-left fa-2x"></i></span>
        </button>
      </div>
      <div class="row col-md-10">
        <div id="frame" style="min-width: 210px;" class="col col-md-4" v-for="pet in displayArray" v-if="showOutput">
          <div class="border border-dark p-2">
            <div><strong>Name:</strong> {{ pet.name }}</div>
            <div><strong>Location:</strong> {{ pet.city }}</div>
            <div><strong>Age:</strong> {{ pet.animalAge }}</div>
            <div><strong>Sex:</strong> {{ pet.animalSex }}</div>
            <div><strong>Size:</strong> {{ pet.animalSize }}</div>
            <div><strong>Breed:</strong> {{ pet.breed }}</div>
            <div><strong>Contact Email:</strong> <a style="font-size: 13px" :href="'mailto:'+ pet.email">{{ pet.email }}</a></div>
            <div><strong>Contact Phone:</strong> {{ pet.phone }}</div>
            <img id="petImage" :src="pet.image" width="200" height="auto" class="image-responsive" />
            <div class="m-2">{{ pet.description }}</div>
            <div id="petOptions">
              <i class="fas fa-paw fa-1x pr-1"></i>
              <ul>
                <li v-for="petOptions in newOptionsArray">{{ petOptions }}</li>
              </ul>
              <i class="fas fa-paw fa-1x pr-1"></i>
            </div>
          </div>
        </div>
      </div>
      <div id="next" class="col-md-1" style="display:none;">
        <button type="button" class="btn btn-sm" style="height: 100%" id="nextBtn" @click="nextPage();">
          <span class="arrow-icon"><i class="fas fa-arrow-circle-right fa-2x"></i></span>
        </button>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
    name: 'petfinderapi',
    mounted() {
      console.log ('Mounted successfully!');
    },
    data: function() {
        return {
            showOutput: false,
            output: 'basic',
            searchZip: '',
            petsArray: [],
            // option: '',
            newOptionsArray: [], // array of manipulated options from api
            animalType: '',
            animalSize: '',
            animalAge: '',
            animalSex: '',
            itemCount: 3,
            pageNum: 0,
            remainder: 0,
            // lastOffset: 0,
            prevBtn: '',
            nextBtn: '',
            showError: false,
            errorMsg: '<h1>There was an error. Please try again.</h1>',
            noMatchesFound: '<h1>Sorry, but we did not find any matches.<h1>',
            showStatus: true,
            fetchingStatus: '<h1>Fetching a list of potential new best friends...</h1>',
            apiRequest: null,
            apiKey: "Pzl6OrmbLxqQuKEejdrl2EBMrVfaYGoboHsw4e1zb8ztBRHL5u",
            apiSecret: "9EWRCDwHXJIAowYJ3xmRa438xDseehynjYsQQJMQ",
        }
        created: function() {
          this.$url.get("https://api.petfinder.com/v2/animals")
      .then(res => {
        this.data = res.data;
      });
  }
}
},

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "artisan": "^0.1.2",
        "bootstrap": "^4.0.0",
        "bootstrap-sass": "^3.4.1",
        "cross-env": "^7.0.3",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^7.3.1"
    },
    "dependencies": {
        "axios": "^0.19",
        "heroku": "^7.47.5",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.9",
        "node": "^15.0.0",
        "node-forge": "^0.10.0",
        "vue": "^3.0.4",
        "vue-template-compiler": "^2.6.12",
        "webpack": "^4.0.0",
        "webpack-cli": "^4.2.0",
        "webpack-config": "^7.5.0",
        "webpack-mix": "^3.0.0"
    },
    "peerDependencies": {}
}

Answer 1

const app = new Vue({
  el: '#services'
});

is "running" Vue inside an element with id="services". You don't have such element.

Change <div id="results"> to <div id="services">