Vue... split content into rows based on screen width

rows.js

/*eslint no-unused-vars: ["warn", { "argsIgnorePattern": "h" }]*/

import Vue from 'vue'
import Viewport from '../helpers/viewport'
import axios from 'axios'
import chunk from 'lodash.chunk'

const fetchTeam = () => {
	const response = response || axios.get('/team.json')
	return response
}

export default new Vue({

	data() {
		return {
			team: [],
			columns: 1,
			loaded: false,
			chunks: [],
			slot: null,
			current: false
		}
	},

	watch: {
		columns(value) {
			this.chunks = chunk(this.team, value)
			this.current = null
		}
	},

	created() {
		this.viewport = new Viewport(true)

		this.viewport
			.at(
				'(min-width: 1em)',
				() => {
					this.columns = 1
				}
			)
			.at(
				'(min-width: 37.5em)',
				() => {
					this.columns = 2
				},
				() => {
					this.columns = 1
				}
			)
			.at(
				'(min-width: 61.25em)',
				() => {
					this.columns = 4
				}
			)


		fetchTeam().then(({data}) => {
			this.team = data.team.map((member) => ({...member, status: null}))
			this.chunks = chunk(this.team, this.columns)
		})
	},

	methods: {
		onClick(row, id, column, e) {
			e.preventDefault()
			this.slot = row
			this.column = column
			this.current = this.team.find((member) => member.id === id)

			this.chunks = chunk(this.team.map((member) => {
				const status = member.id === id ? true : false
				return {...member, status}
			}), this.columns)
		},

		beforeEnter: function (el) {
			log('beforeEnter')
			// ...
		},
		// the done callback is optional when
		// used in combination with CSS
		enter: function (el, done) {
			// ...
			log('enter')
			done()
		},
		afterEnter: function (el) {
			log('afterEnter')
			// ...
		},
		enterCancelled: function (el) {
			log('enterCancelled')
			// ...
		},
		// --------
		// LEAVING
		// --------
		beforeLeave: function (el) {
			log('beforeLeave')
			// ...
		},
		// the done callback is optional when
		// used in combination with CSS
		leave: function (el, done) {
			// ...

			log('leave')
			done()
		},
		afterLeave: function (el) {
			log('afterLeave')
			// ...
		},
		// leaveCancelled only available with v-show
		leaveCancelled: function (el) {
			log('leaveCancelled')
			// ...
		}
	},

	render(h) {
		const { current, slot } = this
		return (
			<div class="wrapper">
				{this.chunks.map((members, row) => (
					<div>
						<div class="gt u-bg-dark">
							{members.map((member, column) => (
								<div class={`gt__half gd__quarter team__member ${member.status === false ? 'is-inactive' : ''}`}>
									<a class="team__photo" href={`#team-${column}`} onClick={this.onClick.bind(this, row, member.id, column)}>
										<img src={ member.image } alt={ member.title } class="team__img img-fill" />
									</a>
								</div>
							))}
						</div>
						{row === slot && current ? 
							<transition name={'test'} enter={this.enter} leave={this.leave} duration="1000" css={false}>
								<div class="u-bg-dark">
									<div class={`team__bd team__bd--${this.column} u-panel`}>
										<h4 class="heading-6">
											<span class="team__name">{ current.name } { current.id }</span>
											{ current.job } | { current.location }
										</h4>
										<p>{ current.body }</p>
									</div>
								</div>
							</transition>
							: null
						}
					</div>
				))}
				<div class="g__half gt__third gd__quarter team__ad u-bg-dark u-text-center">
					<h2 class="heading-5 t-brand">See yourself here?</h2>
					<a href="#0" class="btn btn--box btn--brand">Join us</a>
				</div>
			</div>
		)
	}

})