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];
	});
}

Below is the system used for sorting members on the team page. Team members have an array of strings called terms, as well as a string called name. These two are used for sorting. Before sorting, members were displayed based on the order that they filled out their information on the form page, from oldest to newest. The user has the ability to select from a dropdown whether to sort by first / last name, whether to sort by first completed term / most recent term, and whether to reverse either of these. Term order is determined by year then season, concatenating the two to produce a numerical order for comparison. Preferred name is split and the first name ([0]) or the last name ([length - 1]) is used for determining order. All sorting methods use genericComparison(a, b) to follow DRY. They are also found in a collection called sortingMethods as shown below for organizational purposes. When the user changes a sorting option, an event callback is called, changing the sorting preference variable it's tied to and then calling onSortingChanged, which is where the actual sorting takes place. The callbacks are under Vue's methods object in order to simplify event attachment (using @change in the markup)

// Converts seasons to numbers
const seasons = {
	spring: 0,
	summer: 1,
	fall: 2
}

/**
 * Determines term order based off of year / season
 * @param   {string} s The string of the term being ordered, e.g. Summer2020, Fall2020, etc.
 * @returns {number} A number indicating the order of the team member
 */
function getTermOrder(s) {
	let str = s.replace(/[^0-9](?=[0-9])/g, '$& ').split(' ');
	return str[1] + seasons[str[0].toLowerCase()];
}

// Collection of sorting methods to sort team members with
const sortingMethods = {
	/**
	 * Generic comparison method; for use by the remaining methods only
	 * @param   {number|string} a item a to compare
	 * @param   {number|string} b item b to compare
	 * @returns {number} sort order
	 */
	genericComparison: function(a, b) {
		if (a > b) return 1;
		if (a < b) return -1;
		return 0;
	},
	/**
	 * Compares two people by the term they most recently completed
	 * @param   {object}   a member a to compare
	 * @param   {object}   b member b to compare
	 * @returns {number} sort order
	 */
	mostRecentTerm: function(a, b) {
		let seasonA = getTermOrder(a.terms[a.terms.length - 1]);
		let seasonB = getTermOrder(b.terms[b.terms.length - 1]);
		return sortingMethods.genericComparison(seasonA, seasonB) * -1;
	},
	// (continues for a few more methods),
	// showing how names is done without showing doc + preferredNameFirst
	preferredNameLast: function(a, b) {
		let splitA = a.name.split(' ');
		let splitB = b.name.split(' ');
		return sortingMethods.genericComparison(splitA[splitA.length - 1], splitB[splitB.length - 1]);
	}
}

// in Vue({ methods: ... })
// multiple event callbacks precede the below one, simply showing the bottommost for example
/**
 * Callback for changing the invertTeamSort toggle
 * @param {object} evt The input that called this event
 */
onTermSortReverseChanged: function(evt) {
	invertTermSort = evt.target.checked;
	this.onSortingChanged();
},
/**
 * Generic call for when sorting has been changed
 */
// add'l contextual note: data is a part of Vue's reactive data, and is an object of teams holding arrays for each team
onSortingChanged: function() {
	Object.keys(data).forEach(key => {
		data[key].sort(function(a, b) {
			if (invertNameSort) return nameSort(a, b) * -1;
			else return nameSort(a, b);
		});
		data[key].sort(function(a, b) {
			if (invertTermSort) return termSort(a, b) * -1;
			else return termSort(a, b);
		})
	});
}