feat: move from life cycle to data or watcher

- remove from created / mounted
- initialize component services in data
- use immediate watcher where appropriate
- deep watch for route changes

src/views/teams/EditTeam.vue

@@ -180,8 +180,8 @@ export default {
 	name: 'EditTeam',
 	data() {
 		return {
-			teamService: TeamService,
-			teamMemberService: TeamMemberService,
+			teamService: new TeamService(),
+			teamMemberService: new TeamMemberService(),
 			team: TeamModel,
 			teamId: this.$route.params.id,
 			member: TeamMemberModel,
@@ -191,7 +191,7 @@ export default {
 
 			newMember: UserModel,
 			foundUsers: [],
-			userService: UserService,
+			userService: new UserService(),
 
 			showError: false,
 			title: '',
@@ -206,15 +206,13 @@ export default {
 			timeout: 60000,
 		}),
 	},
-	created() {
-		this.teamService = new TeamService()
-		this.teamMemberService = new TeamMemberService()
-		this.userService = new UserService()
-		this.loadTeam()
-	},
 	watch: {
 		// call again the method if the route changes
-		$route: 'loadTeam',
+		'$route': {
+			handler: 'loadTeam',
+			deep: true,
+			immediate: true,
+		},
 	},
 	computed: {
 		userIsAdmin() {

src/views/teams/ListTeams.vue

@@ -32,12 +32,11 @@ export default {
 	name: 'ListTeams',
 	data() {
 		return {
-			teamService: TeamService,
+			teamService: new TeamService(),
 			teams: [],
 		}
 	},
 	created() {
-		this.teamService = new TeamService()
 		this.loadTeams()
 	},
 	mounted() {

src/views/teams/NewTeam.vue

@@ -37,18 +37,14 @@ export default {
 	name: 'NewTeam',
 	data() {
 		return {
-			teamService: TeamService,
-			team: TeamModel,
+			teamService: new TeamService(),
+			team: new TeamModel(),
 			showError: false,
 		}
 	},
 	components: {
 		CreateEdit,
 	},
-	created() {
-		this.teamService = new TeamService()
-		this.team = new TeamModel()
-	},
 	mounted() {
 		this.setTitle(this.$t('team.create.title'))
 	},