Below is the solution I came up with for the team carousel (note that not the entire template is mine, but rather what I will explain). Originally, there were multiple carousel-item containers, with a v-if checking if teamMember.id (used to be a hardcoded number in the testing arrays which conflicted with how team members were going to be stored) was within the proper range (1-3, 4-6, etc.), and the first carousel-item was marked "active" in the template. A team mate was struggling for a week or two trying to set it up to be dynamic. I thought about it during lunch, and I proposed dividing the array length by 3 (with some extra necessary math to account for 0-index) and using Array.slice() to condense the template into a single dynamic carousel-item. The lower-level team-member containers required a bit of tricky math since the index had to be re-converted back into something that accounts for the higher-level division. After a few tests, I discovered that teamMembers.slice(0+(n*3-3), 3+(n*3-3)) worked perfectly. The only other thing that needed handled was marking the first as active, which I moved to Vue.mounted. After about an hour, the team page required no more maintained hard-coding.

<!-- in team carousel template -->
<div class="carousel-item" v-for="n in teamRows">
	<div class="row">
		<div v-for="teamMember in teamMembers.slice(0+(n*3-3), 3+(n*3-3))" class="col-sm-4 col-text" tabindex="-1">
			<img :id="teamMember.modalId" @click="teamMember.showModal=true" role="button" label="team member modal button" tabindex=0 v-on:keyup.enter="teamMember.showModal=true" @error="imgOnError" class="team-img" :src="teamMember.img" alt="team member photo">
			<p>{{teamMember.name}}</p>
			<p>{{teamMember.roles}}</p>
		</div>
	</div>
</div>

// in team carousel Vue component definition
computed: {
	teamRows() {
		return Math.floor((this.teamMembers.length - 1) / 3) + 1;
	},
	
// in Vue({ mounted: })
document.querySelectorAll('.carousel-inner .carousel-item:nth-of-type(1)').forEach(e => {
	e.classList.add('active');
});

The overall Changeling team data is stored in an array of member objects. However, the teams page expects members to be organized into groups of teams. Some members are on more than one team, so we wanted them to show up in the teams they were a part of. In order to do this, I used Object.entries.filter to extract members from the provided teamID and put that within Object.fromEntries so that we could also attach some missing information within Object.keys.map such as a showModal bool, the member id, and a src to the member's photo (if they uploaded one; photos have an error handler that defaults to a "No Photo" image).

/**
 * Filters out teams from project team data
 * @param   {object} data    The original JSON data being filtered from
 * @param   {string} teamID  The team name
 * @returns {Array.<object>} Array of team members where key = their user ID from the form
 */
function teamFromData(data, teamID) {
	let team = Object.fromEntries(Object.entries(data).filter(([key, value]) => value.teams.includes(teamID) && key !== "testadmin"));
	return Object.keys(team).map(key => {
		data[key].id = key;
		data[key].img = String.format("data/{0}.jpg", key);
		data[key].showModal = false;
		return data[key];
	});
}